Love menu

Javascript Menu Uitklapmenu (tekst) Highlight menu Luxe menu Love menu Gekleurd menu Dropdown Menu

Untitled Love menu

Love menu

Een geinig en makkelijk menu

Alles is aan te passen, je kunt er ook je eigen gifje in meenemen.

Plaats onderstaande code tussen de <head> tags van je pagina:
<script language="javascript"> //The Background Color of the buttons var bgColor="#ffcccc" //The TextColor of the buttons var textColor="#FFFFFF" //The Font Family of the Buttons var fontFace="Fixedsys" //The Text Size of the Buttons - style type var fontSize="16" //The Border Style var BorderStyle="groove" //The Borders Background Color var BorderColor="white" //The onMouseOver Border color change var OMOBorder="navy" //The onMouseOver Background change of the button var OMObg="red" //The onMouseOver Text Color change of the button var OMOText="gold" //*********EDIT YOUR MESSAGES HERE************ var msg = new Array() msg[1]="Kadootje.net" msg[2]="Websegin" msg[3]="Alphamega" msg[4]="I wanna date!" msg[5]="Leejoo" msg[6]="Jouw pagina" msg[7]="Navulset" msg[8]="Tuinplantencentrale" msg[9]="Javascripts" msg[10]="Flash" function L(w){ var l = new Array(w) l[1]="http://www.kadootje.net" l[2]="http://vetlog.nl" l[3]="http://www.alphamegahosting.com/p-af=55092" l[4]="http://www.iwannadate.nl/lnk.cfm?AffID=885F7CE6C1164E56BB3518C3E2CA74E5&f=ho" l[5]="http://www.leejoo.nl" l[6]="http://www.jouwpagina.nl" l[7]="http://www.navulset.nl" l[8]="http://www.tuinplantencentrale" l[9]="http://www.javascripts.com" l[10]="http://flashkit.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:150;cursor:hand;'" var style3="style='position:absolute;top:150;left:150;cursor:hand;'" var style4="style='position:absolute;top:200;left:170;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:420;cursor:hand;'" var style8="style='position:absolute;top:50;left:400;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=300 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=300 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=320 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=390 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=410 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=410 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=390 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=35 document.all.ball2.style.pixelTop=45 document.all.ball3.style.pixelTop=55 document.all.ball4.style.pixelTop=65 document.all.ball2.style.pixelLeft=360 document.all.ball3.style.pixelLeft=360 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=265 document.all.ball2.style.pixelTop=245 document.all.ball2.style.pixelLeft=285 document.all.ball3.style.pixelLeft=445 document.all.ball3.style.pixelTop=245 document.all.ball4.style.pixelTop=225 } 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>

Plaats onderstaande code tussen de <body> tags
(wil je hetzelfde gifje gebruiken vergeet dat dan niet op te slaan en in dezelfde directory als je pagina te plaatsen):
<div id="MainFrame" style="position:relative;top:20;left:10;"> <div id="nav"></div> <div id="ball" style="position:absolute;"> <img src="heart.gif"> </div> <div id="ball2" style="position:absolute;"> <img src="heart.gif"> </div> <div id="ball3" style="position:absolute;"> <img src="heart.gif"> </div> <div id="ball4" style="position:absolute;"> <img src="heart.gif"> </div> </div>