With CSS all you need to do is put a piece of code in your style sheet to automagically make image or text rollovers. You don't need a second image or scripting. Put the code in the head section of your page between the <HEAD> and the </HEAD>. You only have to do this once. CSS Style for Opacity <style type="text/css"> a.linkopacity img { filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; -khtml-opacity: 0.5;} a.linkopacity:hover img { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; -khtml-opacity: 1.0; } </style> Code (markup): Then add <a class="linkopacity" to the link when you want to make the rollover. It works with hyperlinked text and images. <a class="linkopacity" href="http://www.codemasterz.th7.net"> <img src="http://www.codemasterz.th7.net/avatars/Mixed_Avatars/bart.jpg" border="0" style="border:1px solid black;" width="32" height="32"></a> Code (markup): Opacity Compatibility: The Opacity Rollover works in IE and Mozilla. We know opacity works in Safari 1.2.3, but it doesn't work in Opera yet. The code is forward compatible. It's CSS3. --------------------------------------- he second tutorial will show you how to make your images fade in and out when the mouse scrolls over it. Part 1. This is a very simple script, and only takes a few steps. First, put the following code in the header of your web page: <SCRIPT language=JavaScript> <!-- nereidFadeObjects = new Object(); nereidFadeTimers = new Object(); function nereidFade(object, destOp, rate, delta){ if (!document.all) return if (object != "[object]"){ setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0); return; } clearTimeout(nereidFadeTimers[object.sourceIndex]); diff = destOp-object.filters.alpha.opacity; direction = 1; if (object.filters.alpha.opacity > destOp){ direction = -1; } delta=Math.min(direction*diff,delta); object.filters.alpha.opacity+=direction*delta; if (object.filters.alpha.opacity != destOp){ nereidFadeObjects[object.sourceIndex]=object; nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects ["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate); } } //--> </SCRIPT> Code (markup): Part 2.Now, anywhere you want the effect to take place, add the following tag: <img src=imageurl.gif border=0 style=filter:alpha(opacity=20) onMouseOver=nereidFade(this,100,20,10) onMouseOut=nereidFade(this,20,5,5)> Code (markup): Part 3.Simple as that! Good Luck!