Compatibility. This tip only works with Internet Explorer version 4.0 and higher.
Webmaster
Tips
[ All Tips ]
A rollover that changes the opacity
By using stylesheets, the opacity of an image can be varied. By combining this property with a simple JavaScript, you can produce a really nice mouse-over effect. And a single image is all you need to set it up.
Insert the following script in the header of your page, between the tags <HEAD> and </HEAD>:
<SCRIPT LANGUAGE="JavaScript1.2">
function makevisible(cur,which){
if (which==0) cur.filters.alpha.opacity=100
else cur.filters.alpha.opacity=40 }
</SCRIPT>
Then define your image as follows:
<IMG SRC="my_picture.jpg" BORDER=0 style="filter:alpha(opacity=40)" onMouseover="makevisible(this,0)" onMouseout="makevisible(this,1)">
Up to you to change the image used for your effect (here my_picture.jpg) and the starting opacity of this image (here 40%).
Compatibility. This tip only works with Internet Explorer version 4.0 and higher.
Discover all Webmaster tips.