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.
Demos:
Simply insert the below into the BODY
section of your page, at the very end (right above the ending
</body>
tag):
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
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>
Customizing
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.
Limitations
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: