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.
» This script was made possible by: Dynamic Drive !
 |
 |
 |
TO VIEW EFFECT, RUN YOUR MOUSE OVER THE ABOVE IMAGES.
==========================================================
Step 1. Add the following code to the <head></head> section of your HTML document:
<script language="JavaScript1.2">
//Gradual-Highlight image script- By Dynamic Drive
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for use
function high(which2){
theobject=which2
highlighting=setInterval("highlightit(theobject)",50)
}
function low(which2){
clearInterval(highlighting)
if (which2.style.MozOpacity)
which2.style.MozOpacity=0.3
else if (which2.filters)
which2.filters.alpha.opacity=30
}
function highlightit(cur2){
if (cur2.style.MozOpacity<1)
cur2.style.MozOpacity=parseFloat(cur2.style.MozOpacity)+0.1
else if (cur2.filters&&cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=10
else if (window.highlighting)
clearInterval(highlighting)
}
</script>
==========================================================
Step 2: Then, insert the below inside the <img> tag of all of the images you want the effect applied to:
style="filter:alpha(opacity=30);-moz-opacity:0.3" onMouseover="high(this)" onMouseout="low(this)"
==========================================================
An example would be:
<a href="whatever.htm"><img src="mygif.gif" border=0 style="filter:alpha(opacity=30);-moz-opacity:0.3" onMouseover="high(this)" onMouseout="low(this)"></a>
==========================================================