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. Əgər kömək lazımdırsa lütfən yeni sual verin.

How to use onmouseover onmouseclick in Firefox

  • 4 cavab
  • 4 have this problem
  • 1 view
  • 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