Phiên bản đầy đủ: jsB@nk » Trình đơn » Menu có ảnh chỉ điểm
URL: https://www.javascriptbank.com/dynamic-image-menu.html
Hiệu ứng tạo một trình đơn khá sinh động, khi ta rê con trỏ chuột đến tùy chọn nào thì ảnh sẽ di chuyển theo tùy chọn đó.
Phiên bản đầy đủ: jsB@nk » Trình đơn » Menu có ảnh chỉ điểm
URL: https://www.javascriptbank.com/dynamic-image-menu.html
<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--><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--><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-->