Menu Rollover Animation - JavaScript Made Easy

WebSiteMadeEasy.net

FontsMadeEasy.com

RankChecker.net

Google Search:

Learn Java Script Today

Over 5000 Free Fonts

Tutorials

Javascript Forum

Other Javascript Resources

Advance DHTML Tutorial

Menu Rollover Animation

Script creates menu with links based on rollover effect. While moving cursor over the link images display in a proper order and it creates a nice looking effect.

Insert into <HEAD>

document.images[img].src = "dyn1.gif";
	setTimeout ('document.images["'+img+'"].src = "dyn2.gif";', 50);
	setTimeout ('document.images["'+img+'"].src = "dyn3.gif";', 100);
	setTimeout ('document.images["'+img+'"].src = "dyn4.gif";', 150);
	setTimeout ('document.images["'+img+'"].src = "dyn5.gif";', 200);
	setTimeout ('document.images["'+img+'"].src = "'+img+'_hover.gif";', 250);
}
function off(img)
{
if (!document.images) return;
document.images[img].src = "dyn5.gif";
setTimeout ('document.images["'+img+'"].src = "dyn4.gif";', 50);
setTimeout ('document.images["'+img+'"].src = "dyn3.gif";', 100);
setTimeout ('document.images["'+img+'"].src = "dyn2.gif";', 150);
setTimeout ('document.images["'+img+'"].src = "dyn1.gif";', 200);
setTimeout ('document.images["'+img+'"].src = "'+img+'_normal.gif";', 250);
}

var imgslist = new Array(
"dyn1.gif",
"dyn2.gif",
"dyn3.gif",
"dyn4.gif",
"dyn5.gif",
"img1_hover.gif",
"img2_hover.gif",
"img3_hover.gif",
"img4_hover.gif",
"img5_hover.gif",
"img6_hover.gif"
);

var imgs = new Array();
if (document.images)
	for (x=0; x < imgslist.length; x++) {
		imgs[x] = new Image();
		imgs[x].src = imgslist[x];
	}	
</script>

Insert into <BODY>

Other Options