Full version: jsB@nk » Menu » Navigation » The Ball Menu
URL: https://www.javascriptbank.com/the-ball-menu.html
A JavaScript menu with the dynamic balls when visitors move mouse over it.
Full version: jsB@nk » Menu » Navigation » The Ball Menu
URL: https://www.javascriptbank.com/the-ball-menu.html
<script language="javascript">/* By: Aaron Connelly Email: MAUWDIB@aol.com THIS MUST STAY INTACT!!!*///The Background Color of the buttonsvar bgColor="black"//The TextColor of the buttonsvar textColor="lime"//The Font Family of the Buttonsvar fontFace="Arial"//The Text Size of the Buttons - style typevar fontSize="16"//The Border Stylevar BorderStyle="groove"//The Borders Background Colorvar BorderColor="red"//The onMouseOver Border color changevar OMOBorder="navy"//The onMouseOver Background change of the buttonvar OMObg="blue"//The onMouseOver Text Color change of the buttonvar OMOText="gold"//*********EDIT YOUR MESSAGES HERE************var msg = new Array()msg[1]="HTML Pages"msg[2]="Guestbook"msg[3]="DHTML Page"msg[4]="Cool Graphics"msg[5]="FREE MUSIC!"msg[6]="Javascripts!!!!!"msg[7]="Java & CGI"msg[8]="CNN News"msg[9]="What's DOM?"msg[10]="Learn ??"//*********EDIT YOUR LINKS HERE*************//Be sure to line them up correctlyfunction L(w){var l = new Array(w)l[1]="http://JavaScriptBank.com"l[2]="http://JavaScriptBank.com"l[3]="http://JavaScriptBank.com"l[4]="http://JavaScriptBank.com"l[5]="http://JavaScriptBank.com"l[6]="http://JavaScriptBank.com"l[7]="http://JavaScriptBank.com"l[8]="http://JavaScriptBank.com"l[9]="http://JavaScriptBank.com"l[10]="http://JavaScriptBank.com"location.href=l[w]}//***********DON'T EDIT BELOW THIS LINE**************function animateBall(){var style1="style='position:absolute;top:50;left:170;cursor:hand;'"var style2="style='position:absolute;top:100;left:160;cursor:hand;'"var style3="style='position:absolute;top:150;left:170;cursor:hand;'"var style4="style='position:absolute;top:200;left:190;cursor:hand;'"var style5="style='position:absolute;top:200;left:400;cursor:hand;'"var style6="style='position:absolute;top:150;left:420;cursor:hand;'"var style7="style='position:absolute;top:100;left:430;cursor:hand;'"var style8="style='position:absolute;top:50;left:420;cursor:hand;'"var style9="style='position:absolute;top:10;left:295;cursor:hand;'"var style10="style='position:absolute;top:240;left:295;cursor:hand;'"var code="<table border=0 " + style1 + " width=150>"code+="<tr><td onMouseOver='On1()' onMouseOut='out()' onClick='L(1)'>"code+="<center><div id='a'>" + msg[1] + "</div></center>"code+="</td></tr></table>"var code2="<table border=0 " + style2 + " width=150>"code2+="<tr><td onMouseOver='On2()' onMouseOut='out()' onClick='L(2)'>"code2+="<center><div id='b'>" + msg[2] + "</div></center>"code2+="</td></tr></table>"var code3="<table border=0 " + style3 + " width=150>"code3+="<tr><td onMouseOver='On3()' onMouseOut='out()' onClick='L(3)'>"code3+="<center><div id='c'>" + msg[3] + "</div></center>"code3+="</td></tr></table>"var code4="<table border=0 " + style4 + " width=150>"code4+="<tr><td onMouseOver='On4()' onMouseOut='out()' onClick='L(4)'>"code4+="<center><div id='d'>" + msg[4] + "</div></center>"code4+="</td></tr></table>"var code5="<table border=0 " + style5 + " width=150>"code5+="<tr><td onMouseOver='On5()' onMouseOut='out()' onClick='L(5)'>"code5+="<center><div id='e'>" + msg[5] + "</div></center>"code5+="</td></tr></table>"var code6="<table border=0 " + style6 + " width=150>"code6+="<tr><td onMouseOver='On6()' onMouseOut='out()' onClick='L(6)'>"code6+="<center><div id='f'>" + msg[6] + "</div></center>"code6+="</td></tr></table>"var code7="<table border=0 " + style7 + " width=150>"code7+="<tr><td onMouseOver='On7()' onMouseOut='out()' onClick='L(7)'>"code7+="<center><div id='g'>" + msg[7] + "</div></center>"code7+="</td></tr></table>"var code8="<table border=0 " + style8 + " width=150>"code8+="<tr><td onMouseOver='On8()' onMouseOut='out()' onClick='L(8)'>"code8+="<center><div id='h'>" + msg[8] + "</div></center>"code8+="</td></tr></table>"var code9="<table border=0 " + style9 + " width=150>"code9+="<tr><td onMouseOver='On9()' onMouseOut='out()' onClick='L(9)'>"code9+="<center><div id='i'>" + msg[9] + "</div></center>"code9+="</td></tr></table>"var code10="<table border=0 " + style10 + " width=150>"code10+="<tr><td onMouseOver='On10()' onMouseOut='out()' onClick='L(10)'>"code10+="<center><div id='j'>" + msg[10] + "</div></center>"code10+="</td></tr></table>"var coder="<table border=0><tr><td>"var endCoder="</tr></td>"var end=coder+code+code2+code3+code4+code5+code6+code7+code8+code9+code10+endCoderdocument.all.nav.innerHTML=enddocument.all.ball.style.pixelLeft=360document.all.ball.style.pixelTop=55document.all.ball2.style.pixelLeft=360document.all.ball2.style.pixelTop=105document.all.ball3.style.pixelTop=155document.all.ball3.style.pixelLeft=360document.all.ball4.style.pixelTop=205document.all.ball4.style.pixelLeft=360document.all.a.style.backgroundColor=bgColordocument.all.a.style.color=textColordocument.all.a.style.fontSize=fontSizedocument.all.a.style.fontFamily=fontFacedocument.all.a.style.borderStyle=BorderStyledocument.all.a.style.borderColor=BorderColordocument.all.b.style.backgroundColor=bgColordocument.all.b.style.color=textColordocument.all.b.style.fontSize=fontSizedocument.all.b.style.fontFamily=fontFacedocument.all.b.style.borderStyle=BorderStyledocument.all.b.style.borderColor=BorderColordocument.all.c.style.backgroundColor=bgColordocument.all.c.style.color=textColordocument.all.c.style.fontSize=fontSizedocument.all.c.style.fontFamily=fontFacedocument.all.c.style.borderStyle=BorderStyledocument.all.c.style.borderColor=BorderColordocument.all.d.style.backgroundColor=bgColordocument.all.d.style.color=textColordocument.all.d.style.fontSize=fontSizedocument.all.d.style.fontFamily=fontFacedocument.all.d.style.borderStyle=BorderStyledocument.all.d.style.borderColor=BorderColordocument.all.e.style.backgroundColor=bgColordocument.all.e.style.color=textColordocument.all.e.style.fontSize=fontSizedocument.all.e.style.fontFamily=fontFacedocument.all.e.style.borderStyle=BorderStyledocument.all.e.style.borderColor=BorderColordocument.all.f.style.backgroundColor=bgColordocument.all.f.style.color=textColordocument.all.f.style.fontSize=fontSizedocument.all.f.style.fontFamily=fontFacedocument.all.f.style.borderStyle=BorderStyledocument.all.f.style.borderColor=BorderColordocument.all.g.style.backgroundColor=bgColordocument.all.g.style.color=textColordocument.all.g.style.fontSize=fontSizedocument.all.g.style.fontFamily=fontFacedocument.all.g.style.borderStyle=BorderStyledocument.all.g.style.borderColor=BorderColordocument.all.h.style.backgroundColor=bgColordocument.all.h.style.color=textColordocument.all.h.style.fontSize=fontSizedocument.all.h.style.fontFamily=fontFacedocument.all.h.style.borderStyle=BorderStyledocument.all.h.style.borderColor=BorderColordocument.all.i.style.backgroundColor=bgColordocument.all.i.style.color=textColordocument.all.i.style.fontSize=fontSizedocument.all.i.style.fontFamily=fontFacedocument.all.i.style.borderStyle=BorderStyledocument.all.i.style.borderColor=BorderColordocument.all.j.style.backgroundColor=bgColordocument.all.j.style.color=textColordocument.all.j.style.fontSize=fontSizedocument.all.j.style.fontFamily=fontFacedocument.all.j.style.borderStyle=BorderStyledocument.all.j.style.borderColor=BorderColor}function On1(){document.all.a.style.backgroundColor=OMObgdocument.all.a.style.color=OMOTextdocument.all.a.style.fontSize=fontSizedocument.all.a.style.fontFace=fontFacedocument.all.a.style.borderStyle=BorderStyledocument.all.a.style.borderColor=OMOBorderdocument.all.ball.style.pixelLeft=320document.all.ball.style.pixelTop=55}function On2(){document.all.b.style.backgroundColor=OMObgdocument.all.b.style.color=OMOTextdocument.all.b.style.fontSize=fontSizedocument.all.b.style.fontFace=fontFacedocument.all.b.style.borderStyle=BorderStyledocument.all.b.style.borderColor=OMOBorderdocument.all.ball2.style.pixelLeft=310document.all.ball2.style.pixelTop=105}function On3(){document.all.c.style.backgroundColor=OMObgdocument.all.c.style.color=OMOTextdocument.all.c.style.fontSize=fontSizedocument.all.c.style.fontFace=fontFacedocument.all.c.style.borderStyle=BorderStyledocument.all.c.style.borderColor=OMOBorderdocument.all.ball3.style.pixelLeft=320document.all.ball3.style.pixelTop=155}function On4(){document.all.d.style.backgroundColor=OMObgdocument.all.d.style.color=OMOTextdocument.all.d.style.fontSize=fontSizedocument.all.d.style.fontFace=fontFacedocument.all.d.style.borderStyle=BorderStyledocument.all.d.style.borderColor=OMOBorderdocument.all.ball4.style.pixelLeft=340document.all.ball4.style.pixelTop=205}function On5(){document.all.e.style.backgroundColor=OMObgdocument.all.e.style.color=OMOTextdocument.all.e.style.fontSize=fontSizedocument.all.e.style.fontFace=fontFacedocument.all.e.style.borderStyle=BorderStyledocument.all.e.style.borderColor=OMOBorderdocument.all.ball4.style.pixelLeft=372document.all.ball4.style.pixelTop=205}function On6(){document.all.f.style.backgroundColor=OMObgdocument.all.f.style.color=OMOTextdocument.all.f.style.fontSize=fontSizedocument.all.f.style.fontFace=fontFacedocument.all.f.style.borderStyle=BorderStyledocument.all.f.style.borderColor=OMOBorderdocument.all.ball3.style.pixelLeft=390document.all.ball3.style.pixelTop=155}function On7(){document.all.g.style.backgroundColor=OMObgdocument.all.g.style.color=OMOTextdocument.all.g.style.fontSize=fontSizedocument.all.g.style.fontFace=fontFacedocument.all.g.style.borderStyle=BorderStyledocument.all.g.style.borderColor=OMOBorderdocument.all.ball2.style.pixelLeft=400document.all.ball2.style.pixelTop=105}function On8(){document.all.h.style.backgroundColor=OMObgdocument.all.h.style.color=OMOTextdocument.all.h.style.fontSize=fontSizedocument.all.h.style.fontFace=fontFacedocument.all.h.style.borderStyle=BorderStyledocument.all.h.style.borderColor=OMOBorderdocument.all.ball.style.pixelLeft=393document.all.ball.style.pixelTop=55}function On9(){document.all.i.style.backgroundColor=OMObgdocument.all.i.style.color=OMOTextdocument.all.i.style.fontSize=fontSizedocument.all.i.style.fontFace=fontFacedocument.all.i.style.borderStyle=BorderStyledocument.all.i.style.borderColor=OMOBorderdocument.all.ball.style.pixelLeft=360document.all.ball.style.pixelTop=45document.all.ball2.style.pixelTop=75document.all.ball3.style.pixelTop=105document.all.ball4.style.pixelTop=135document.all.ball2.style.pixelLeft=370document.all.ball3.style.pixelLeft=350document.all.ball4.style.pixelLeft=360}function On10(){document.all.j.style.backgroundColor=OMObgdocument.all.j.style.color=OMOTextdocument.all.j.style.fontSize=fontSizedocument.all.j.style.fontFace=fontFacedocument.all.j.style.borderStyle=BorderStyledocument.all.j.style.borderColor=OMOBorderdocument.all.ball.style.pixelLeft=360document.all.ball.style.pixelTop=275document.all.ball2.style.pixelTop=240document.all.ball2.style.pixelLeft=270document.all.ball3.style.pixelLeft=450document.all.ball3.style.pixelTop=240document.all.ball4.style.pixelTop=215}function out(){document.all.a.style.backgroundColor=bgColordocument.all.a.style.color=textColordocument.all.a.style.fontSize=fontSizedocument.all.a.style.fontFace=fontFacedocument.all.a.style.borderStyle=BorderStyledocument.all.a.style.borderColor=BorderColordocument.all.b.style.backgroundColor=bgColordocument.all.b.style.color=textColordocument.all.b.style.fontSize=fontSizedocument.all.b.style.fontFace=fontFacedocument.all.b.style.borderStyle=BorderStyledocument.all.b.style.borderColor=BorderColordocument.all.c.style.backgroundColor=bgColordocument.all.c.style.color=textColordocument.all.c.style.fontSize=fontSizedocument.all.c.style.fontFace=fontFacedocument.all.c.style.borderStyle=BorderStyledocument.all.c.style.borderColor=BorderColordocument.all.d.style.backgroundColor=bgColordocument.all.d.style.color=textColordocument.all.d.style.fontSize=fontSizedocument.all.d.style.fontFace=fontFacedocument.all.d.style.borderStyle=BorderStyledocument.all.d.style.borderColor=BorderColordocument.all.e.style.backgroundColor=bgColordocument.all.e.style.color=textColordocument.all.e.style.fontSize=fontSizedocument.all.e.style.fontFace=fontFacedocument.all.e.style.borderStyle=BorderStyledocument.all.e.style.borderColor=BorderColordocument.all.f.style.backgroundColor=bgColordocument.all.f.style.color=textColordocument.all.f.style.fontSize=fontSizedocument.all.f.style.fontFace=fontFacedocument.all.f.style.borderStyle=BorderStyledocument.all.f.style.borderColor=BorderColordocument.all.g.style.backgroundColor=bgColordocument.all.g.style.color=textColordocument.all.g.style.fontSize=fontSizedocument.all.g.style.fontFace=fontFacedocument.all.g.style.borderStyle=BorderStyledocument.all.g.style.borderColor=BorderColordocument.all.h.style.backgroundColor=bgColordocument.all.h.style.color=textColordocument.all.h.style.fontSize=fontSizedocument.all.h.style.fontFace=fontFacedocument.all.h.style.borderStyle=BorderStyledocument.all.h.style.borderColor=BorderColordocument.all.i.style.backgroundColor=bgColordocument.all.i.style.color=textColordocument.all.i.style.fontSize=fontSizedocument.all.i.style.fontFace=fontFacedocument.all.i.style.borderStyle=BorderStyledocument.all.i.style.borderColor=BorderColordocument.all.j.style.backgroundColor=bgColordocument.all.j.style.color=textColordocument.all.j.style.fontSize=fontSizedocument.all.j.style.fontFace=fontFacedocument.all.j.style.borderStyle=BorderStyledocument.all.j.style.borderColor=BorderColordocument.all.ball.style.pixelLeft=360document.all.ball.style.pixelTop=55document.all.ball2.style.pixelLeft=360document.all.ball2.style.pixelTop=105document.all.ball3.style.pixelTop=155document.all.ball3.style.pixelLeft=360document.all.ball4.style.pixelTop=205document.all.ball4.style.pixelLeft=360}window.onload=animateBall</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><!--PUT THIS WITHIN THE YOUR BODY--><div id="MainFrame" style="position: relative; top: 20px; left: 10px;"><div id="nav"></div><!--IMPORTANT ** Be sure to put the correct directory for the images--><div id="ball" style="position: absolute;"><img src="BallMenu.gif" width="25" height="25"></div><div id="ball2" style="position: absolute;"><img src="BallMenu.gif" width="25" height="25"></div><div id="ball3" style="position: absolute;"><img src="BallMenu.gif" width="25" height="25"></div><div id="ball4" style="position: absolute;"><img src="BallMenu.gif" width="25" height="25"></div></div><!--END OF SCRIPT--><span style="position: absolute; top: 350px; left: 35px;"><center><br><img src="BallMenu.gif" width="62" height="58"></center></span><span style="width: 100%; color: black;"> <b>By Aaron Conenlly</b></span></body><!-- 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/BallMenu.gif