FF1+ IE5+ Opr8+

Gradual Highlight Image Script

Author: Dynamic Drive

Note: Script rewritten Nov 8th, 07'

Description: A script that makes any image(s) appear dull before the mouse moves over it; as the mouse moves over it, the image gradually changes to its original appearance. Use it to instantly add stunning onMouseover effects to your menu images, for example.


Directions: Developer's View

Simply insert the below into the BODY section of your page, at the very end (right above the ending </body> tag):

Select All

The above code references an external js file, which you need to download:

Then, to apply the effect to any image on your page with a dimension, give it a class="gradualfader" declaration, for example:

<img src="test.gif" class="gradualfader" />

<a href="http://www.dynamicdrive.com" class="anotherclass gradualfader"><img src="dd.gif" /></a>


You can fine tune the effect if you wish inside the .js file:

gradualFader.baseopacity=0.4 //set base opacity when mouse isn't over element (decimal below 1)
gradualFader.increment=0.2 //amount of opacity to increase after each iteration (suggestion: 0.1 or 0.2)

The first variable sets the default opacity of participating elements when the mouse isn't over them (0=completely opaque, 1=fully normal). The second controls how fast the fade effect animates- the larger the number, the faster.


In IE, with the exception of images, the element you're applying the effect to must have a "layout" (such as a "width" defined) in order for it to work. Per MSDN, an element has layout when one of the below is true: