Use A to move the image toward left, D to move the image right.
Add the following script into the <head> section of your page: <script language="JavaScript"> <!-- Begin var ieKey, nKey; n = (document.layers) ? 1 : 0; ie = (document.all) ? 1 : 0; function moveImage() { if (n) { block = document.blockDiv; } if (ie) { block = blockDiv.style; } block.xpos = parseInt(block.left); block.active = 0; document.onkeydown = keyDown; document.onkeyup = keyUp; if (n) { document.captureEvents(Event.keydown | Event.keyup); } } function keyDown(e) { if (n) { nKey = e.which; ieKey = 0; } if (ie) { ieKey = event.keyCode; nKey = 0; } if ((nKey == 97 || ieKey == 65) && !block.active) { block.active = 1; slideLeft(); } if ((nKey == 100 || ieKey == 68) && !block.active) { block.active = 1; slideRight(); } } function keyUp(e) { if (n) { nKey = e.which; ieKey = 0; } if (ie) { ieKey = event.keyCode; nKey = 0; } if ((nKey == 97 || ieKey == 65 || nKey == 100 || ieKey == 68)) block.active = 0; } function slideRight() { if (block.active) { block.xpos += 5; block.left = block.xpos; status = block.xpos; setTimeout("slideRight()", 25); } } function slideLeft() { if (block.active) { block.xpos -= 5; block.left = block.xpos; status = block.xpos; setTimeout("slideLeft()", 25); } } // End --> </script>
Add the following script into the <BODY> section of your page: <style> <!-- #wrapper{ position:relative; height:30px } #wrapper2{ position:absolute } #coffeemenu03{ filter:revealTrans(Duration=1.5,Transition=12) visibility:hide } --> </style></HEAD> <BODY> <ilayer id="coffeemenu01" height=35px> <layer id="coffeemenu02" visibility=show> <span id="wrapper"> <span id="wrapper2" onClick="dropit2();event.cancelBubble=true;return false"> <font face="Verdana"><b><a href="notthisbrowser.html">Click Here To Navigate</a></b></font> </span> </span> </layer> </ilayer> <script language="JavaScript1.2"> var enableeffect=true var selection=new Array() selection[0]='<font face="ARIAL BLACK"><a href="http://www.coffeecup.com">Order Our Stuff</a><br>' selection[1]='<a href="http://www.coffeecup.com">Contact Us via E-mail</a><br>' selection[2]='<a href="http://www.coffeecup.com">Help With Our Items</a><br>' selection[3]='<a href="http://www.coffeecup.com">Products We Have</a><br>' selection[4]='<a href="http://www.coffeecup.com">Services We Offer</a><br></font>' if (document.layers) document.coffeemenu01.document.coffeemenu02.visibility='show' function dropit2(){ if (document.all){ coffeemenu03.style.left=document.body.scrollLeft+event.clientX-event.offsetX coffeemenu03.style.top=document.body.scrollTop+event.clientY-event.offsetY+18 if (coffeemenu03.style.visibility=="hidden"){ if (enableeffect) coffeemenu03.filters.revealTrans.apply() coffeemenu03.style.visibility="visible" if (enableeffect) coffeemenu03.filters.revealTrans.play() } else{ hidemenu() } } } function dropit(e){ if (document.coffeemenu03.visibility=="hide") document.coffeemenu03.visibility="show" else document.coffeemenu03.visibility="hide" document.coffeemenu03.left=e.pageX-e.layerX document.coffeemenu03.top=e.pageY-e.layerY+19 return false } function hidemenu(){ if (enableeffect) coffeemenu03.filters.revealTrans.stop() coffeemenu03.style.visibility="hidden" } function hidemenu2(){ document.coffeemenu03.visibility="hide" } if (document.layers){ document.coffeemenu01.document.coffeemenu02.captureEvents(Event.CLICK) document.coffeemenu01.document.coffeemenu02.onclick=dropit } else if (document.all) document.body.onclick=hidemenu </script> <div id="coffeemenu03" style="position:absolute;left:0;top:0;layer-background-color:#C0C0C0;background-color:#C0C0C0;width:200;visibility:hidden;border:2px solid black;padding:0px"> <script language="JavaScript1.2"> if (document.all) coffeemenu03.style.padding='4px' for (i=0;i<selection.length;i++) document.write(selection[i]) </script> </div> <script language="JavaScript1.2"> if (document.layers){ document.coffeemenu03.captureEvents(Event.CLICK) document.coffeemenu03.onclick=hidemenu2 } </script>
Copyright © 2006 background.ir, all rights reserved. Designer: echess design.
