Bookmark to del.icio.us
Gradual-Highlight Image Script II
Author: J Mark Birenbaum
Description: This is a variation of the original- and extremely popular- gradual highlight image script. Apart from being more customizable, this version differs from the original in that a gradual fade-out effect is added when the mouse moves out of an image. Enjoy!
Move your mouse over any of the following three (identical) images:
Step 1: Insert the below into the <head> section of your page:
Step 2: Add the below inside the <img> tag of all of the images you want the effect applied to:
An example would be:<img src="B2iconcrop.gif" style="filter:alpha(opacity=10)" onmouseover="nereidFade(this,100,30,5)" onmouseout="nereidFade(this,10,50,5)">
Interesting technical note
You may be curious as to how the demo is constructed; after all, it looks somehow as if the image contains two "layers" (the actual image, and the solid color blocks), with the layers switching when the mouse moves over and out. For your information, we were curious too when we received the script from J Mark.
Well, it's actually pretty ingenious, and in fact two images are involved:
Mark created a table, and set the background image for the table to the first image. Then, by placing the second image inside the table, and applying the highlight image effect to it, the result is that the image is fading between the background and the foreground image on interaction. Amazing how HTML and DHTML can come together like that!