New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:

IE5+

Gradual-Highlight Image Script II

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!

Demo:

Move your mouse over any of the following three (identical) images:


Directions Developer's View

Step 1: Insert the below into the <head> section of your page:

Select All

Step 2: Add the below inside the <img> tag of all of the images you want the effect applied to:

Select All

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)">

Viola!

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:

Image 1

Image 2

Image 1

Image 2

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!