image rollover

im using this in a script i have
http://www.dynamicdrive.com/dynamicindex4/image5.htm

now, i put the js in my header

and changed the image tags like this


{img alt="Gallery" src="`$sGImageUrl`thumb/`$aItem.id`.jpg" src_def="design/pic/noimage_120.jpg" style="vertical-align:middle;filter:alpha(opacity=20);-moz-opacity:0.2" class="pic1" onMouseover="this.className='pic2';makevisible(this,'0')" onMouseout="this.className='pic1';makevisible(this,'1')" height="90px" width="90px"}


script uses smarty.
now wehn i did that, it made the images dull, but when i mousover, it doesn't brighten!

It may have something to do with the changing classes you should probably make sure they don't interfere with the outcome of the script

first off that script does not support safari second you can get the same effect using CSS

CSS code:

<style type="text/css">
#effect {filter: alpha(opacity=20);
opacity:0.2;
}
#effect:hover {filter: alpha(opacity=100);
opacity:1;}
</style>

how to apply it to a image in your html: the bolded is important
<img src="your/image/path/goes/here" id="effect"></img>
an a simple javascript may be needed to support IE6, IDK if that javascript I just wrote works I don't have ie6 to test on nor do I know any javascript.

<img src="your/image/path/goes/here" id="effect" onmouseover="getElementById(effect).style.filter = (alpha(opacity=100))"></img>