Gradual Highlight Image Script
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.
Simply insert the below into the BODY
section of your page, at the very end (right above the ending
The above code references an external js file, which you need to download:
- gradualfader.js (<3kb)
Then, to apply the effect to any image on your page with a dimension, give
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: