I have images that are at 1/2 opacity that go to 100% at mouseover and back to 50% at mouseout.
It works in IE + mozilla but not safari. How do I fix this? Here is the code:

<div class="grid_4 "><a href="westford.html"><img src="images/thumbnails/tn_bostonrd4.JPG" alt="" width="200" height="134" style="-moz-opacity:0.5;filter:alpha(opacity=50)" onmouseover="this.style.MozOpacity=1; this.filters.alpha.opacity=100" onmouseout="this.style.MozOpacity=0.5; this.filters.alpha.opacity=50" ></a></div>

Thanks

Try

Without seeing it in action I know I wouldn't be able to help. I find it interesting that a Mozilla code works in IE at all. Have you thought of creating a dual image in CSS that changes the image when you mouse over it?

A sample code would be something like this:





This above codes use color, but you would change background-color to background-image.

You can even alter the code so that two images sit on top of one another as one, instead of the browser downloading two images and getting a minor flicker the first time around you can tell the styles to move up or down to display the next portion of a single image, thus getting no flicker.

...a very good example would be....

http://www.elated.com/articles/css-rollover-buttons/

I actually use the code at this link ALL the time for various sized images.

Katrina

Got it to work using this code:
style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

Seems the same to me as the first code but I'll need to take a closer look.

Thanks

Interesting. I don't know much javascript so I just use this code:



In this case all such images have the "roll" class.