Une colonne de fournies s'en prend à votre souris.
Démo : En cours...
Etape 1 : Ajouter dans le <HEAD> :
<style type="text/css"> .ant { height: 13px; width: 13px; position: absolute; visibility: hidden; } </style>
Si vous changer d'images, il faudra changer les dimensions ici.
Etape 2: Ajouter dans le <HEAD> :
<script language="Javascript" src="antslib.js"> </script>
Télécharger le fichier que vous placerez dans le répertoire de votre page.
batslib.js
Etape 3: Ajouter dans le <HEAD> :
<script language="Javascript"> // Copyright 1999 by Mike Hall - Web address: http://www.brainjar.com var mouseX = 0; var mouseY = 0; if (isMinNS4) document.captureEvents(Event.MOUSEMOVE); document.onmousemove = getMousePosition; function getMousePosition(e) { if (isMinNS4) { mouseX = e.pageX; mouseY = e.pageY; } if (isMinIE4) { mouseX = event.clientX + document.body.scrollLeft; mouseY = event.clientY + document.body.scrollTop; } return true; } var ants = new Array(); function initAnts() { var i, layer; i = 0; while ((layer = getLayer("ant" + (i + 1))) != null) { ants[i] = layer; if (isMinNS4) ants[i].image = ants[i].document.images["antImg" + (i + 1)]; if (isMinIE4) ants[i].image = document.images["antImg" + (i + 1)]; setAnt(i); showLayer(ants[i]); i++; } updateAnts(); } function setAnt(n) { var s, x, y; x = Math.floor(Math.random() * getWindowWidth()); y = Math.floor(Math.random() * getWindowHeight()); s = Math.floor(Math.random() * 4); if (s == 0) x = -getWidth(ants[n]); if (s == 1) x = getWindowWidth(); if (s == 2) y = -getHeight(ants[n]); if (s == 3) y = getWindowHeight(); x += getPageScrollX(); y += getPageScrollY(); moveLayerTo(ants[n], x, y); } function updateAnts() { var i, dx, dy, theta, d; d = 3; for (i = 0; i < ants.length; i++) { dx = mouseX - getLeft(ants[i]); dy = mouseY - getTop(ants[i]); theta = Math.round(Math.atan2(-dy, dx) * 180 / Math.PI); if (theta < 0) theta += 360; if (Math.abs(dx) < d && Math.abs(dy) < d) setAnt(i); else if (theta > 23 && theta <= 68) { moveLayerBy(ants[i], d, -d); ants[i].image.src = "ant_ne.gif"; } else if (theta > 68 && theta <= 113) { moveLayerBy(ants[i], 0, -d); ants[i].image.src = "ant_n.gif"; } else if (theta > 113 && theta <= 158) { moveLayerBy(ants[i], -d, -d); ants[i].image.src = "ant_nw.gif"; } else if (theta > 158 && theta <= 203) { moveLayerBy(ants[i], -d, 0); ants[i].image.src = "ant_w.gif"; } else if (theta > 203 && theta <= 248) { moveLayerBy(ants[i], -d, d); ants[i].image.src = "ant_sw.gif"; } else if (theta > 248 && theta <= 293) { moveLayerBy(ants[i], 0, d); ants[i].image.src = "ant_s.gif"; } else if (theta > 293 && theta <= 338) { moveLayerBy(ants[i], d, d); ants[i].image.src = "ant_se.gif"; } else { moveLayerBy(ants[i], d, 0); ants[i].image.src = "ant_e.gif"; } } setTimeout('updateAnts()', 50); return; } </script>
Etape 4: Ajouter dans la balise <BODY> :
<body onLoad="initAnts();">
Etape 5: Ajouter juste après la balise <BODY> :
<div id="ant1" class="ant"><img name="antImg1" width=13 height=13 src="ant_n.gif"></div> <div id="ant2" class="ant"><img name="antImg2" width=13 height=13 src="ant_n.gif"></div> <div id="ant3" class="ant"><img name="antImg3" width=13 height=13 src="ant_n.gif"></div> <div id="ant4" class="ant"><img name="antImg4" width=13 height=13 src="ant_n.gif"></div> <div id="ant5" class="ant"><img name="antImg5" width=13 height=13 src="ant_n.gif"></div> <div id="ant6" class="ant"><img name="antImg6" width=13 height=13 src="ant_n.gif"></div> <div id="ant7" class="ant"><img name="antImg7" width=13 height=13 src="ant_n.gif"></div> <div id="ant8" class="ant"><img name="antImg8" width=13 height=13 src="ant_n.gif"></div>
Si vous changer d'images, il faudra modifier le code en conséquence.
Etape 6: Copier l'image suivante que vous placerez dans le répertoire de votre page :
