The Ball Menu By Aaron Connelly

If you want to use the balls above just download this image. It is transparent so any background color will go with it.

By Aaron Conenlly

<html><br />
<head><br />
<title>The Ball Menu By Aaron Connelly</title>

/*
 By: Aaron Connelly
 Email: MAUWDIB@aol.com
 THIS MUST STAY INTACT!!!
 This script is free if you keep this credit intact.
 You may not remove it or remove my Name or email. 
 If you wan't this credit to be removed email me about fee. Other than that you must keep this   
 within the script!
*/

//The Background Color of the buttons
var bgColor="black"
//The TextColor of the buttons
var textColor="lime"
//The Font Family of the Buttons
var fontFace="Arial"
//The Text Size of the Buttons - style type
var fontSize="16"
//The Border Style
var BorderStyle="groove"
//The Borders Background Color
var BorderColor="red"
//The onMouseOver Border color change
var OMOBorder="navy"
//The onMouseOver Background change of the button
var OMObg="blue"
//The onMouseOver Text Color change of the button
var 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 correctly

function L(w){
var l = new Array(w)
l[1]="http://www.javascripts.com"
l[2]="http://www.javascripts.com"
l[3]="http://www.javascripts.com"
l[4]="http://www.javascripts.com"
l[5]="http://www.javascripts.com"
l[6]="http://www.javascripts.com"
l[7]="http://www.javascripts.com"
l[8]="http://www.javascripts.com"
l[9]="http://www.javascripts.com"
l[10]="http://www.javascripts.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+endCoder

document.all.nav.innerHTML=end
document.all.ball.style.pixelLeft=360
document.all.ball.style.pixelTop=55
document.all.ball2.style.pixelLeft=360
document.all.ball2.style.pixelTop=105
document.all.ball3.style.pixelTop=155
document.all.ball3.style.pixelLeft=360
document.all.ball4.style.pixelTop=205
document.all.ball4.style.pixelLeft=360

document.all.a.style.backgroundColor=bgColor
document.all.a.style.color=textColor
document.all.a.style.fontSize=fontSize
document.all.a.style.fontFamily=fontFace
document.all.a.style.borderStyle=BorderStyle
document.all.a.style.borderColor=BorderColor
document.all.b.style.backgroundColor=bgColor
document.all.b.style.color=textColor
document.all.b.style.fontSize=fontSize
document.all.b.style.fontFamily=fontFace
document.all.b.style.borderStyle=BorderStyle
document.all.b.style.borderColor=BorderColor
document.all.c.style.backgroundColor=bgColor
document.all.c.style.color=textColor
document.all.c.style.fontSize=fontSize
document.all.c.style.fontFamily=fontFace
document.all.c.style.borderStyle=BorderStyle
document.all.c.style.borderColor=BorderColor
document.all.d.style.backgroundColor=bgColor
document.all.d.style.color=textColor
document.all.d.style.fontSize=fontSize
document.all.d.style.fontFamily=fontFace
document.all.d.style.borderStyle=BorderStyle
document.all.d.style.borderColor=BorderColor
document.all.e.style.backgroundColor=bgColor
document.all.e.style.color=textColor
document.all.e.style.fontSize=fontSize
document.all.e.style.fontFamily=fontFace
document.all.e.style.borderStyle=BorderStyle
document.all.e.style.borderColor=BorderColor
document.all.f.style.backgroundColor=bgColor
document.all.f.style.color=textColor
document.all.f.style.fontSize=fontSize
document.all.f.style.fontFamily=fontFace
document.all.f.style.borderStyle=BorderStyle
document.all.f.style.borderColor=BorderColor
document.all.g.style.backgroundColor=bgColor
document.all.g.style.color=textColor
document.all.g.style.fontSize=fontSize
document.all.g.style.fontFamily=fontFace
document.all.g.style.borderStyle=BorderStyle
document.all.g.style.borderColor=BorderColor
document.all.h.style.backgroundColor=bgColor
document.all.h.style.color=textColor
document.all.h.style.fontSize=fontSize
document.all.h.style.fontFamily=fontFace
document.all.h.style.borderStyle=BorderStyle
document.all.h.style.borderColor=BorderColor
document.all.i.style.backgroundColor=bgColor
document.all.i.style.color=textColor
document.all.i.style.fontSize=fontSize
document.all.i.style.fontFamily=fontFace
document.all.i.style.borderStyle=BorderStyle
document.all.i.style.borderColor=BorderColor
document.all.j.style.backgroundColor=bgColor
document.all.j.style.color=textColor
document.all.j.style.fontSize=fontSize
document.all.j.style.fontFamily=fontFace
document.all.j.style.borderStyle=BorderStyle
document.all.j.style.borderColor=BorderColor
}

function On1(){
document.all.a.style.backgroundColor=OMObg
document.all.a.style.color=OMOText
document.all.a.style.fontSize=fontSize
document.all.a.style.fontFace=fontFace
document.all.a.style.borderStyle=BorderStyle
document.all.a.style.borderColor=OMOBorder
document.all.ball.style.pixelLeft=320
document.all.ball.style.pixelTop=55
}
function On2(){
document.all.b.style.backgroundColor=OMObg
document.all.b.style.color=OMOText
document.all.b.style.fontSize=fontSize
document.all.b.style.fontFace=fontFace
document.all.b.style.borderStyle=BorderStyle
document.all.b.style.borderColor=OMOBorder
document.all.ball2.style.pixelLeft=310
document.all.ball2.style.pixelTop=105
}
function On3(){
document.all.c.style.backgroundColor=OMObg
document.all.c.style.color=OMOText
document.all.c.style.fontSize=fontSize
document.all.c.style.fontFace=fontFace
document.all.c.style.borderStyle=BorderStyle
document.all.c.style.borderColor=OMOBorder
document.all.ball3.style.pixelLeft=320
document.all.ball3.style.pixelTop=155
}
function On4(){
document.all.d.style.backgroundColor=OMObg
document.all.d.style.color=OMOText
document.all.d.style.fontSize=fontSize
document.all.d.style.fontFace=fontFace
document.all.d.style.borderStyle=BorderStyle
document.all.d.style.borderColor=OMOBorder
document.all.ball4.style.pixelLeft=340
document.all.ball4.style.pixelTop=205
}
function On5(){
document.all.e.style.backgroundColor=OMObg
document.all.e.style.color=OMOText
document.all.e.style.fontSize=fontSize
document.all.e.style.fontFace=fontFace
document.all.e.style.borderStyle=BorderStyle
document.all.e.style.borderColor=OMOBorder
document.all.ball4.style.pixelLeft=372
document.all.ball4.style.pixelTop=205
}
function On6(){
document.all.f.style.backgroundColor=OMObg
document.all.f.style.color=OMOText
document.all.f.style.fontSize=fontSize
document.all.f.style.fontFace=fontFace
document.all.f.style.borderStyle=BorderStyle
document.all.f.style.borderColor=OMOBorder
document.all.ball3.style.pixelLeft=390
document.all.ball3.style.pixelTop=155
}
function On7(){
document.all.g.style.backgroundColor=OMObg
document.all.g.style.color=OMOText
document.all.g.style.fontSize=fontSize
document.all.g.style.fontFace=fontFace
document.all.g.style.borderStyle=BorderStyle
document.all.g.style.borderColor=OMOBorder
document.all.ball2.style.pixelLeft=400
document.all.ball2.style.pixelTop=105
}
function On8(){
document.all.h.style.backgroundColor=OMObg
document.all.h.style.color=OMOText
document.all.h.style.fontSize=fontSize
document.all.h.style.fontFace=fontFace
document.all.h.style.borderStyle=BorderStyle
document.all.h.style.borderColor=OMOBorder
document.all.ball.style.pixelLeft=393
document.all.ball.style.pixelTop=55
}
function On9(){
document.all.i.style.backgroundColor=OMObg
document.all.i.style.color=OMOText
document.all.i.style.fontSize=fontSize
document.all.i.style.fontFace=fontFace
document.all.i.style.borderStyle=BorderStyle
document.all.i.style.borderColor=OMOBorder
document.all.ball.style.pixelLeft=360
document.all.ball.style.pixelTop=45
document.all.ball2.style.pixelTop=75
document.all.ball3.style.pixelTop=105
document.all.ball4.style.pixelTop=135
document.all.ball2.style.pixelLeft=370
document.all.ball3.style.pixelLeft=350
document.all.ball4.style.pixelLeft=360
}
function On10(){
document.all.j.style.backgroundColor=OMObg
document.all.j.style.color=OMOText
document.all.j.style.fontSize=fontSize
document.all.j.style.fontFace=fontFace
document.all.j.style.borderStyle=BorderStyle
document.all.j.style.borderColor=OMOBorder
document.all.ball.style.pixelLeft=360
document.all.ball.style.pixelTop=275
document.all.ball2.style.pixelTop=240
document.all.ball2.style.pixelLeft=270
document.all.ball3.style.pixelLeft=450
document.all.ball3.style.pixelTop=240
document.all.ball4.style.pixelTop=215
}
function out(){
document.all.a.style.backgroundColor=bgColor
document.all.a.style.color=textColor
document.all.a.style.fontSize=fontSize
document.all.a.style.fontFace=fontFace
document.all.a.style.borderStyle=BorderStyle
document.all.a.style.borderColor=BorderColor
document.all.b.style.backgroundColor=bgColor
document.all.b.style.color=textColor
document.all.b.style.fontSize=fontSize
document.all.b.style.fontFace=fontFace
document.all.b.style.borderStyle=BorderStyle
document.all.b.style.borderColor=BorderColor
document.all.c.style.backgroundColor=bgColor
document.all.c.style.color=textColor
document.all.c.style.fontSize=fontSize
document.all.c.style.fontFace=fontFace
document.all.c.style.borderStyle=BorderStyle
document.all.c.style.borderColor=BorderColor
document.all.d.style.backgroundColor=bgColor
document.all.d.style.color=textColor
document.all.d.style.fontSize=fontSize
document.all.d.style.fontFace=fontFace
document.all.d.style.borderStyle=BorderStyle
document.all.d.style.borderColor=BorderColor
document.all.e.style.backgroundColor=bgColor
document.all.e.style.color=textColor
document.all.e.style.fontSize=fontSize
document.all.e.style.fontFace=fontFace
document.all.e.style.borderStyle=BorderStyle
document.all.e.style.borderColor=BorderColor
document.all.f.style.backgroundColor=bgColor
document.all.f.style.color=textColor
document.all.f.style.fontSize=fontSize
document.all.f.style.fontFace=fontFace
document.all.f.style.borderStyle=BorderStyle
document.all.f.style.borderColor=BorderColor
document.all.g.style.backgroundColor=bgColor
document.all.g.style.color=textColor
document.all.g.style.fontSize=fontSize
document.all.g.style.fontFace=fontFace
document.all.g.style.borderStyle=BorderStyle
document.all.g.style.borderColor=BorderColor
document.all.h.style.backgroundColor=bgColor
document.all.h.style.color=textColor
document.all.h.style.fontSize=fontSize
document.all.h.style.fontFace=fontFace
document.all.h.style.borderStyle=BorderStyle
document.all.h.style.borderColor=BorderColor
document.all.i.style.backgroundColor=bgColor
document.all.i.style.color=textColor
document.all.i.style.fontSize=fontSize
document.all.i.style.fontFace=fontFace
document.all.i.style.borderStyle=BorderStyle
document.all.i.style.borderColor=BorderColor
document.all.j.style.backgroundColor=bgColor
document.all.j.style.color=textColor
document.all.j.style.fontSize=fontSize
document.all.j.style.fontFace=fontFace
document.all.j.style.borderStyle=BorderStyle
document.all.j.style.borderColor=BorderColor
document.all.ball.style.pixelLeft=360
document.all.ball.style.pixelTop=55
document.all.ball2.style.pixelLeft=360
document.all.ball2.style.pixelTop=105
document.all.ball3.style.pixelTop=155
document.all.ball3.style.pixelLeft=360
document.all.ball4.style.pixelTop=205
document.all.ball4.style.pixelLeft=360
}

window.onload=animateBall
</script><br />
</head><br />
<body bgColor="white">

<br />
<div id="MainFrame" style="position:relative;top:20;left:10;"><br />
<div id="nav"></div><br />
<br />
<div id="ball" style="position:absolute;"><br />
<img src="images/Ballscript2.gif" width=25 height=25><br />
</div><br />
<div id="ball2" style="position:absolute;"><br />
<img src="images/Ballscript2.gif" width=25 height=25><br />
</div><br />
<div id="ball3" style="position:absolute;"><br />
<img src="images/Ballscript2.gif" width=25 height=25><br />
</div><br />
<div id="ball4" style="position:absolute;"><br />
<img src="images/Ballscript2.gif" width=25 height=25><br />
</div><br />
</div><br />
<br />
<span style="position:absolute;top:350;left:35;"><br />
<center>
If you want to use the balls above just download this image. It is transparent so any background color will go with it.
<BR><br />
<img src="images/Ballscript2.gif"><br />
</center><br />
</span><br />
<span style="filter:glow(Add=1,strength=5,direction100,color=silver);width:100%;color:black;">
 
<b>By Aaron Conenlly</b><br />
</span><br />
</body><br />
</html>