Mozilla VPN is currently experiencing an outage. Our team is actively working to resolve the issue. Please check the status page for real-time updates. Thank you for your patience.

This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

ابحث في الدعم

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

How to use onmouseover onmouseclick in Firefox

  • 4 ردود
  • 4 have this problem
  • 5 views
  • آخر ردّ كتبه cor-el

more options

This code displays a picture - then onclick enlarges the picture - this works okay in IE

<style>
<!-- ONCLICK - PIX SIZE -->
.OnClick {height: 100%;}
</style>

<img onclick='className="OnClick"' src="FullPathToPicture" title="CLICK TO ENLARGE PIX">

Why doesn't that code work in Firefox?

This code displays a picture - then onclick enlarges the picture - this works okay in IE <pre><nowiki><style> <!-- ONCLICK - PIX SIZE --> .OnClick {height: 100%;} </style> <img onclick='className="OnClick"' src="FullPathToPicture" title="CLICK TO ENLARGE PIX"></nowiki></pre> Why doesn't that code work in Firefox?

Modified by cor-el

All Replies (4)

more options

FIREFOX DIDN'T POST COMPLETE CODE HERE'S CODE AGAIN - WITHOUT BRACKETS

style .OnClick {height: 100%;} /style

img onclick='className="OnClick"' src="FullPathToPicture" title="CLICK TO ENLARGE PIX"

Why doesn't that code work in Firefox?

Modified by EJJGNC

more options

Maybe use this.className?

<style>
<!-- ONCLICK - PIX SIZE -->
.OnClick {height: 100%;width=100%}
</style>

<img onclick='this.className="OnClick"' src="FullPathToPicture" title="CLICK TO ENLARGE PIX">

Modified by cor-el

more options

Again, that works in IE - but not in Firefox

Also using this: ".OnClick {height: 100%;width=100%}" - does not work well in any browser

That's because most pictures have different height widths - so that using .OnClick {height: 100%;width=100%} would distort the pictures - pictures would elongate upwards or sidewards depending on whether original picture's width or height is larger

Using just width percent - or just height percent - automatically compensates for whichever of two is not used

Also, in most instances "width: AnyPercent%" is preferable to "height: AnyPercent%" because when browser window is downsized the width percent would keep picture width in window and only the lower height portion of pix would need scrolling - and also because in some instances using height percentage spec (rather than specific px setting) causes entire picture to disappear

QUESTION REMAINS: Why doesn't "onclick" work in Firefox?

AND - these also don't work in Firefox "onmouseover onmouseout"

more options

sorry, width=100% should of course be width:100% for a CSS rule.

You can use max-width and min-width instead to reduce the image dimensions.
Then you can set them both to none to remove this restriction and show the image with their natural dimensions. .OnClick { min-height: none; max-width:none; }

Did you try to use "this": onclick='this.className="OnClick"'?

You can try to add the !important; flag to see if that helps.

Modified by cor-el