Gradual Highlight image effect
A script makes any image appear dull before the mouse moves over it; as the
mouse moves over it, the image gradually changes to its original appearance.
The good old "Gradual Highlight" image effect seen on many web pages, is an
old one, but it can still be used in image galleries. It is useful for
navigation buttons as well.
Creating the "Gradual Highlight" effect:
1. Select an existing html page with images.
2. Go to http://www.dynamicdrive.com/dynamicindex4/highlightgrad.htm,
and cut the css and script and insert them into the <head> section
of your page.
Base opacity is 30, but you can change it to whatever you want.
I changed it to 50, so initial images are still visible. To do that - change 3
lines: filter:alpha(opacity=30);
-moz-opacity:0.3;
var baseopacity=30
to filter:alpha(opacity=yourvalue);
-moz-opacity:yourvalue;
var baseopacity=yourvalue
3. Then, insert the line below inside the <img> tag of
all of the images you want the effect applied to: class="gradualshine"
onMouseover="slowhigh(this)" onMouseout="slowlow(this)"
To illustrate this classic script, I selected images with buttons. The dull
button images became lit-up when your mouse moves over it giving the impression
of a light being turned on, or an email message ready to be sent,.....
|