Voetspoor

Voetspoor

Heel leuk effect waarbij je muisaanwijzer achtervolgt word door voetjes.

Plaats onderstaande code tussen de <head> tags
 <script> var isNS = (navigator.appName == "Netscape"); var STEPSIZE = 60; function processMouseIE() { if(event.clientX>(tmpX+STEPSIZE) || event.clientX<(tmpX-STEPSIZE) || event.clientY>(tmpY+STEPSIZE) || event.clientY<(tmpY-STEPSIZE)) { document.all.left.style.visibility="visible"; document.all.right.style.visibility="visible"; //swap foot to move if(current=="right") current="left"; else current="right"; tmpX=event.clientX; tmpY=event.clientY; if(current=="left")//left is topmost { document.all.right.style.pixelLeft = event.clientX + document.body.scrollLeft - 0; document.all.right.style.pixelTop = event.clientY + document.body.scrollTop + 5 ; } if (current=="right")//right is topmost { document.all.left.style.pixelLeft = event.clientX + document.body.scrollLeft - 0; document.all.left.style.pixelTop = event.clientY + document.body.scrollTop + 5 ; } } } function processMouseNS(e) { if(e.pageX>(tmpX+STEPSIZE) || e.pageX<(tmpX-STEPSIZE) || e.pageY>(tmpY+STEPSIZE) || e.pageY<(tmpY-STEPSIZE)) { document.left.visibility="show"; document.right.visibility="show"; if(current=="right") current="left"; else current="right"; tmpX=e.pageX; tmpY=e.pageY; if(current=="left") { document.right.left = e.pageX; document.right.top = e.pageY; } if (current=="right") { document.left.left = e.pageX; document.left.top = e.pageY; } } } function hidef() { if(isNS){ document.left.visibility="hide"; document.right.visibility="hide"; } else{ document.all.left.style.visibility="hidden"; document.all.right.style.visibility="hidden"; } } function init() { current="right"; setInterval("hidef();",2000); if(isNS){ tmpX=100; tmpY=150; document.right.left = tmpX; document.right.top = tmpY; document.left.left = tmpX; document.left.top = tmpY+STEPSIZE; document.captureEvents(Event.MOUSEMOVE); document.onmousemove = processMouseNS; } else{ tmpX=event.clientX; tmpY=event.clientY; document.all.right.style.pixelLeft = event.clientX + document.body.scrollLeft - 0; document.all.right.style.pixelTop = event.clientY + document.body.scrollTop + 5 ; document.all.left.style.pixelLeft = event.clientX + document.body.scrollLeft - 0; document.all.left.style.pixelTop = event.clientY + document.body.scrollTop + STEPSIZE; document.onmousemove = processMouseIE; } } </script>

Vervang de eerste body tag door dit regeltje:
<body onLoad="init()">

Als laatste plaats je dit stukje code aan het begin van je <body> tags
<div id="left" style="position: absolute; z-index: 100; top: 1px; left: 0px; width: 40px; height: 55px; visibility: hidden"><img src="links.gif" border="0"></div> <div id="right" style="position: absolute; z-index: 10; top: 1px; left: 0px; width: 40px; height: 55px; visibility: hidden"><img src="rechts.gif" border="0"></div>

Vergeet niet deze voetjes op te slaan en in dezelfde map als je pagina te plaatsen!