Full version: jsB@nk » Menu » Gliding Rollovers
URL: https://www.javascriptbank.com/gliding-rollovers-index.html
A DHTML Nirvana gliding rollovers example.
Full version: jsB@nk » Menu » Gliding Rollovers
URL: https://www.javascriptbank.com/gliding-rollovers-index.html
<style type="text/css"><!--body {/*background-color: #5D5765;*/}img {border: 0px;}.maintext {font-family: "Courier New", Courier, mono;font-size: 18px;color: #FFCC99;}a:link {font-family: "Courier New", Courier, mono;font-size: 14px;color: #FFFFFF;}a:visited {font-family: "Courier New", Courier, mono;font-size: 14px;color: #FFCC66;}--></style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script type="text/javascript">// made by Eddie Traversa copyright 2004// free to use as long as this copyright notice stays intact. var timer1=null;// needed for xhtml dtds px = (document.getElementById) ? "px" : "";// use the offset variable to refine the pointers end position// setting it to 0 sees the pointer end at left position of element// so if we need to adjust it so that the pointer centers over text etc.. // then this is the variable to use;var offset = 15;// Controls the speed of the animationvar timerspeed = 25;// controls the number of step from point a to point b. higher numbers see a decrease in speedvar steps = 20;// controls the deceleration// dont recommend changing this var as this number seems to work well across all browsersvar decrease = 0.09; // gets the current position of the link;function getPosition(id) { if (document.getElementById) {endPos = document.getElementById(id).offsetLeft;}else if (document.layers) {endPos = document.layers[id].left;}}// shoves the pointer around the screen based on what current link is activated// to make a vertical one just change offsetLeft to offsetTop// and change any references to .left to .topfunction glideMenu(obj) {if (document.getElementById) {el = document.getElementById(obj).style ;}if (document.layers) {el = document.layers[obj] ;}el.xpos = parseInt(el.left);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.left = el.xpos+px ;timer1= setTimeout("glideMenu('" + obj + "')",timerspeed);}// refresh the page on a window resize so ns4 doesnt screw the layers upwindow.onresize = function () {history.go(0);}</script><script language="JavaScript" type="text/JavaScript"><!--function MM_reloadPage(init) { //reloads the window if Nav4 resized if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) { document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }} else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();}MM_reloadPage(true);//--></script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><div id="link1" style="position: absolute; top: 44px; left: 162px; z-index: 3;"> <a href="#" onmouseover="getPosition('link1');glideMenu('pointer')"> <img src="button1.gif" width="95" height="25" border="0"></a> </div><div id="link2" style="position: absolute; top: 44px; left: 256px; z-index: 3;"> <a href="#" onmouseover="getPosition('link2');glideMenu('pointer')"><img src="button2.gif" width="95" height="25" border="0"></a> </div><div id="link3" style="position: absolute; top: 44px; left: 351px; z-index: 3;"><a href="#" onmouseover="getPosition('link3');glideMenu('pointer')"> <img src="button3.gif" width="95" height="25" border="0"> </a></div><div id="link4" style="position: absolute; top: 44px; left: 446px; z-index: 3;"><a href="#" onmouseover="getPosition('link4');glideMenu('pointer')"> <img src="button4.gif" width="95" height="25" border="0"> </a></div><div id="link5" style="position: absolute; top: 44px; left: 541px; z-index: 3;"><a href="#" onmouseover="getPosition('link5');glideMenu('pointer')"> <img src="button4.gif" width="95" height="25" border="0"> </a></div><div id="pointer" style="position: absolute; top: 27px; width: 130px; height: 30px; z-index: 2; left: 477.74px;"><img src="pointer_animated.gif" alt="" width="81" height="61" border="0"> </div><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->http://javascriptbank.com/javascript/menu/Gliding_Rollovers/Gliding_Rollovers_images.zip