How to use onmouseover onmouseclick in Firefox
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?
Modified by cor-el
All Replies (4)
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
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
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"
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