« »

When visitors move mouse over the menu, the code makes the specified image that float depend on every option.

Label: Dynamic Image Menu

Demo
Enlarge
Reload
New window

Code
CSS
JavaScript
HTML
Print

Copy All x2

<STYLE type=text/css>
DIV.c1 
{
	Z-INDEX: 1; LEFT: 20px; WIDTH: 33px; POSITION: absolute; TOP: 107px; HEIGHT: 31px
}

.out {
	BORDER-RIGHT: #0099ff 1px solid; BORDER-TOP: #0099ff 1px solid; FONT-SIZE: 12px; Z-INDEX: 5; PADDING-BOTTOM: 1px; BORDER-LEFT: #0099ff 1px solid; WIDTH: 100%; COLOR: #0099ff; TEXT-INDENT: 4px; PADDING-TOP: 1px; BORDER-BOTTOM: #0099ff 1px solid; FONT-FAMILY: "Courier New", Courier, mono; BACKGROUND-COLOR: #99ccff; TEXT-ALIGN: center;
}
.over {
	BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; FONT-SIZE: 12px; Z-INDEX: 5; PADDING-BOTTOM: 1px; BORDER-LEFT: #000000 1px solid; WIDTH: 100%; COLOR: #0099ff; TEXT-INDENT: 4px; PADDING-TOP: 1px; BORDER-BOTTOM: #000000 1px solid; FONT-FAMILY: "Courier New", Courier, mono; BACKGROUND-COLOR: #ffffff; TEXT-ALIGN: center
}
.down {
	BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; FONT-SIZE: 12px; Z-INDEX: 5; PADDING-BOTTOM: 1px; BORDER-LEFT: #000000 1px solid; WIDTH: 100%; COLOR: #000000; TEXT-INDENT: 4px; PADDING-TOP: 1px; BORDER-BOTTOM: #000000 1px solid; FONT-FAMILY: "Courier New", Courier, mono; BACKGROUND-COLOR: #ffffff; TEXT-ALIGN: center
}

.link1 {
	FONT-SIZE: 14px; COLOR: #000000; FONT-STYLE: normal; FONT-FAMILY: "Courier New", Courier, mono
}

#menu1LYR {
	LEFT: 100px; WIDTH: 200; CURSOR: pointer; POSITION: absolute; TOP: 25%; HEIGHT: 5%
}
#menu2LYR {
	LEFT: 100px; WIDTH: 200; CURSOR: pointer; POSITION: absolute; TOP: 142; HEIGHT: 5%
}
#menu3LYR {
	LEFT: 100px; WIDTH: 200; CURSOR: pointer; POSITION: absolute; TOP: 166; HEIGHT: 5%
}
#menu4LYR {
	LEFT: 100px; WIDTH: 200; CURSOR: pointer; POSITION: absolute; TOP: 190; HEIGHT: 5%
}
#menu5LYR {
	LEFT: 100px; WIDTH: 200; CURSOR: pointer; POSITION: absolute; TOP: 214; HEIGHT: 5%
}
#menu6LYR {
	LEFT: 100px; WIDTH: 200; CURSOR: pointer; POSITION: absolute; TOP: 238; HEIGHT: 5%
}
#menu7LYR {
	LEFT: 100px; WIDTH: 200; CURSOR: pointer; POSITION: absolute; TOP: 262; HEIGHT: 5%
}

A:link {
	FONT-SIZE: 14px; COLOR: #0099ff;   FONT-FAMILY: "Courier New", Courier, mono; TEXT-DECORATION: none
}


</STYLE>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<SCRIPT>
px =  "px";
timer1	= null;
var decrease	= 0.1; 
var offset = 0;
var selected_id = null;

function getPosition(id) 
{ 
	endPos = document.getElementById(id).offsetTop;
}	

function actionMenu(obj,steps) 
{
	if (document.getElementById) 
	{
		el = document.getElementById(obj) ;
	}
		el.xpos = el.offsetTop;
	if (el.xpos < endPos) 
	{
		clearTimeout(timer1);
	}
	else if (el.xpos >= endPos) 
	{
		clearTimeout(timer1);
	}
		distance = endPos - el.xpos + offset;
		steps = distance*decrease; 
		el.xpos += steps;
		el.style.top = el.xpos+px ;
		timer1= setTimeout("actionMenu('" + obj + "')",25);
}

function initMenu() 
{
	var args = initMenu.arguments;
	switch(args[0]) 
	{
	
	case "menu_highlight" :
		if(selected_id	!= args[1]) 
		{
			el = document.getElementById(args[1]);
			el.className	=  args[2];
		 }
	break;
	
	case "menu_click" :
		if(selected_id	!= null) 
		{
			document.getElementById(selected_id).className =  args[2];
		}
		document.getElementById(args[1]).className = args[3];
		selected_id = args[1];
	break;
	}
}

</SCRIPT>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<div style="position: relative;">
<DIV class=c1 id=pointer>
<IMG height=28 src="chipbay.gif" width=60 border=0> </DIV>

<DIV class=out 
onmousedown="initMenu('menu_click','menu2LYR','out ','down'); " 
id=menu2LYR 
onmouseover="initMenu('menu_highlight','menu2LYR','over');getPosition('menu2LYR');actionMenu('pointer','20')" 
onmouseout="initMenu('menu_highlight','menu2LYR','out')">
<A href="http://www.JavaScriptBank.com/" 
target=_blank><SPAN class=link1>JavaScriptBank.com</SPAN></A> </DIV>

<DIV class=out 
onmousedown="initMenu('menu_click','menu3LYR','out ','down'); " 
id=menu3LYR 
onmouseover="initMenu('menu_highlight','menu3LYR','over');getPosition('menu3LYR');actionMenu('pointer','20')" 
onmouseout="initMenu('menu_highlight','menu3LYR','out')">
<A href="http://JavaScriptBank.com/" target=_blank><SPAN 
class=link1>Link ITEM #</SPAN></A> </DIV>

<DIV class=out 
onmousedown="initMenu('menu_click','menu4LYR','out','down');" 
id=menu4LYR 
onmouseover="initMenu('menu_highlight','menu4LYR','over');getPosition('menu4LYR');actionMenu('pointer','20')" 
onmouseout="initMenu('menu_highlight','menu4LYR','out')">
<A href="http://JavaScriptBank.com/" target=_blank><SPAN 
class=link1>Link ITEM #</SPAN></A> </DIV>

<DIV class=out 
onmousedown="initMenu('menu_click','menu5LYR','out','down');" 
id=menu5LYR 
onmouseover="initMenu('menu_highlight','menu5LYR','over');getPosition('menu5LYR');actionMenu('pointer','20')" 
onmouseout="initMenu('menu_highlight','menu5LYR','out')">
<A href="http://JavaScriptBank.com/" target=_blank><SPAN 
class=link1>Link ITEM #</SPAN></A> </DIV>

<DIV class=out 
onmousedown="initMenu('menu_click','menu6LYR','out','down');" 
id=menu6LYR 
onmouseover="initMenu('menu_highlight','menu6LYR','over');getPosition('menu6LYR');actionMenu('pointer','20')" 
onmouseout="initMenu('menu_highlight','menu6LYR','out')">

<A href="http://JavaScriptBank.com/" target=_blank><SPAN 
class=link1>Link ITEM #</SPAN></A> </DIV>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->