Avatar for Username

Search Support

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

This thread was archived. Please ask a new question if you need help.

How to use onmouseover onmouseclick in Firefox

  • 4 replies
  • 4 have this problem
  • 5 views
  • Last reply by cor-el

EJJGNC
EJJGNC
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)

EJJGNC
EJJGNC Question owner
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

cor-el
cor-el
  • Moderator
  • Top 10 Contributor
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

EJJGNC
EJJGNC Question owner
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"

cor-el
cor-el
  • Moderator
  • Top 10 Contributor
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