JavaScript

JavaScripti >> Menuji >> Žogasti menu

Opis:
Žogasti menu vam dovoljuje 10 povezav. Vse povezave skupaj izgledajo kot krog. 4 žoge so med vsemi temi povezavami. Ko premaknete miškin kazalec čez povezavo, se žoge premaknjejo k njej. Spremenite lahko vse (robove, tekst, barve, ozadje, vrsto pisave, velikost pisave, in še več...).

Primer:
Za primer kliknite TUKAJ.

Izvorna koda:

Korak 1 :
Ta del kode vstavite v <head> del strani:

<script language="javascript"> //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]="Smrkec.com" msg[2]="Stran 2" msg[3]="Stran 3" msg[4]="Stran 4" msg[5]="Stran 5" msg[6]="Stran 6" msg[7]="Stran 7" msg[8]="Stran 8" msg[9]="Stran 9" msg[10]="Stran 10" //*********EDIT YOUR LINKS HERE************* //Be sure to line them up correctly function L(w){ var l = new Array(w) l[1]="http://www.smrkec.com" l[2]="http://www.smrkec.com" l[3]="http://www.smrkec.com" l[4]="http://www.smrkec.com" l[5]="http://www.smrkec.com" l[6]="http://www.smrkec.com" l[7]="http://www.smrkec.com" l[8]="http://www.smrkec.com" l[9]="http://www.smrkec.com" l[10]="http://www.smrkec.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>

Korak 2:
Ta del kode vstavite v <body> del strani:

Korak 3:
V mapo kjer imate spletno stran na kateri boste uporabili JavaScript prekopirajte tudi to slikco: