Téléchargez
le script et ses composants ici ( 6,36 Ko ).
Vous devez retrouver dans le dossier
contenant cette page Html les 4 fichiers suivants :
bat1.gif - bat2.gif -
bat3.gif
batslib.js
Etape 1 :
Ajouter avant la balise </head> :
<style type="text/css">
.bat {
width: 75px;
height: 30px;
position: absolute;
visibility: hidden;
}
</style>
<script language="Javascript"
src="batslib.js"></script>
<script language="Javascript">
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;
}
function random(min, max) {
return Math.random() * (max - min) + min;
}
var bats = new Array();
function initBats() {
var i, j, layer;
i = 0;
j = 1;
while ((layer = getLayer("bat" + (i + 1))) != null) {
bats[i] = layer;
if (isMinNS4)
bats[i].image = bats[i].document.images["batimg" + (i + 1)];
if (isMinIE4)
bats[i].image = document.images["batimg" + (i + 1)];
bats[i].a = random(75, 200);
bats[i].b = random(50, 80);
bats[i].theta = Math.random() * 2 * Math.PI;
bats[i].delta = random(4 * Math.PI / 100, 8 * Math.PI / 100);
if (Math.random() >= 0.5)
bats[i].delta = -bats[i].delta;
bats[i].phi = Math.random() * 2 * Math.PI;
bats[i].imageIndex = j;
if (++j > 3)
j = 1;
moveLayerTo(bats[i], 0, 0);
showLayer(bats[i]);
i++;
}
updateBats();
}
function updateBats() {
var i, x1, y1, x2, y2;
for (i = 0; i < bats.length; i++) {
bats[i].theta += bats[i].delta;
if (bats[i].theta > 2 * Math.PI)
bats[i].theta -= 2 * Math.PI;
if (bats[i].theta < 0)
bats[i].theta += 2 * Math.PI;
x1 = Math.round(bats[i].a * Math.sin(bats[i].theta));
y1 = Math.round(bats[i].b * Math.cos(bats[i].theta));
x2 = mouseX + Math.round(x1 * Math.cos(bats[i].phi) + y1 *
Math.sin(bats[i].phi));
y2 = mouseY - Math.round(y1 * Math.cos(bats[i].phi) - x1 *
Math.sin(bats[i].phi));
moveLayerTo(bats[i], x2, y2);
bats[i].image.src = "bat" + bats[i].imageIndex + ".gif";
if (++bats[i].imageIndex > 3)
bats[i].imageIndex = 1;
}
setTimeout('updateBats()', 25);
return;
}
</script>
Etape 2:
Ajouter dans le tag du <BODY>
<body onLoad="initBats();">
Etape 3 :
Ajouter entre les balises <body> et </body> :
<div id="bat1"
class="bat"><img name="batimg1" width=75 height=30
src="bat1.gif"></div>
<div id="bat2" class="bat"><img name="batimg2" width=75
height=30 src="bat2.gif"></div>
<div id="bat3" class="bat"><img name="batimg3" width=75
height=30 src="bat3.gif"></div>
<div id="bat4" class="bat"><img name="batimg4" width=75
height=30 src="bat1.gif"></div>
<div id="bat5" class="bat"><img name="batimg5" width=75
height=30 src="bat2.gif"></div>