Simple JavaScript Rollover Animation Menu

JavaScript 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.

Script Demo:

Demo

JavaScript Code:

Insert this code into <head> tags

<script type="text/javascript">
function on(img)
{
	if (!document.images)
		return;

	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 this code into <body> tags

<table border="0" cellpadding="0" cellspacing="0">
<tr>
	<td><a href="#" onmouseout="off('img1');" onmouseover="on('img1');"><img border="0" name="img1" src="img1_normal.gif"></a></td>
</tr>
<tr>
	<td><a href="#" onmouseout="off('img2');" onmouseover="on('img2');"><img border="0" name="img2" src="img2_normal.gif"></a></td>
</tr>
<tr>
	<td><a href="#" onmouseout="off('img3');" onmouseover="on('img3');"><img border="0" name="img3" src="img3_normal.gif"></a></td>
</tr>
<tr>
	<td><a href="#" onmouseout="off('img4');" onmouseover="on('img4');"><img border="0" name="img4" src="img4_normal.gif"></a></td>
</tr>
<tr>
	<td><a href="#" onmouseout="off('img5');" onmouseover="on('img5');"><img border="0" name="img5" src="img5_normal.gif"></a></td>
</tr>
<tr>
	<td><a href="#" onmouseout="off('img6');" onmouseover="on('img6');"><img border="0" name="img6" src="img6_normal.gif"></a></td>
</tr>
</table>

Instruction:

Change the following text:

img1_normal.gif - Normal menu image URL channels.
dyn1.gif - Mouseover image URL channels.

Webmaster » Web Programming » JavaScript » Image Effects » Simple Rollover Animation Menu

Related Links:

Home | Sitemap | Bookmark This Page

Sponsored Links

Recommended Links