Une souris suivie comme son ombre
... 2ème
Voilà bien la suite presque logique d'un premier
évènement dans la plus pure tradition du gadget !
Alors, après autres recherches et autres cogitations
intenses, nouvelles insomnies provoquées par le titillement
régulier du "il y a quelque chose qui manque ...", je vous
livre ce nouvel exemple d'inutilité sur le Web ... !
Mais il faut rendre au Web ce qui appartient au Web : ce script
est en quelque sorte une compilation d'évènements et de
bouts d'écriture que j'ai glané ici et là sur la
grande toile : je ne puis donc en revendiquer la paternité
complète. Je me suis borné à le mettre en page
de façon cohérente en adaptant au fur et à
mesure les différentes variables pour que les fonctions mises
en oeuvre produisent l'effet recherché.
Je dois confesser autre chose ... : je l'utilise sur une page
de mon site, quand bien même il s'agit d'un gadget. Cherchez-la
: elle est quelque peu différente de celle-ci !
...
Bon, abrégeons : pas besoin d'un grand discours : vous
voyez le résultat en promenant votre souris sur la page
!
Je ne ferai pas davantage d'analyse complète du script
que pour l'autre souris : vous y seriez aussi pour un bon moment ...
et sans doute bien davantage.
Alors, je répète ... retenez votre souffle
:
|
SCRIPT LANGUAGE="JavaScript"><!--
var nomIMa =
"boutons/oisga2.gif";
var nomIMb =
"boutons/oisdr2.gif";
var heightIM =
54;
var widthIM =
110;
NS4 = (document.layers) ? 1 : 0;
IE4 = (document.all) ? 1 : 0;
VERSION4 = (NS4|IE4) ? 1 : 0;
var objIM = new Array();
var numObjIM = 2;
var ptrIM = 0;
var xborneIM = 91;
var yborneIM = 39;
var xaqIM = xborneIM;
var yaqIM = yborneIM;
var xxaqIM = xborneIM;
var yyaqIM = yborneIM;
var zIM = 0;
function BougeObjIM () {
if (zIM == 0) {
(this.d) ? this.x+=2 : this.x-=2;
if (this.x >= xborneIM) {
this.x = xborneIM;
this.changedir();
}
if (this.x <= -xborneIM) {
this.x = -xborneIM;
this.changedir();
}
if (Math.round(Math.random()*(this.s+1)*60) == 1)
this.changedir ();
}
var t = Math.round(Math.random()*(this.s+1)*10);
if (t==2 && this.y < yborneIM)
this.y++;
if (t==1 && this.y > -yborneIM) this.y--;
if (NS4) {
this.layer.left = this.x+xaqIM;
this.layer.top = this.y+yaqIM;
} else {
this.layer.style.pixelLeft = this.x+xaqIM;
this.layer.style.pixelTop = this.y+yaqIM;
}
}
function ChangedirObjIM () {
if (this.d == 0) {
this.d = 1;
this.img.src = nomIMb;
}
else {
this.d = 0;
this.img.src = nomIMa;
}
}
function DefObjIM(ID) {
if (NS4) {
this.layer = new Layer (0);
this.layer.visibility = "visible";
this.layer.document.write('<img name=\"imgIM'+ID+'\"
src=\"'+nomIMa+'\" height=\"'+heightIM+'\"
width=\"'+widthIM+'\" border=\"0\">');
this.layer.document.close();
eval ('this.img =
this.layer.document.images[\'imgIM'+ID+'\']');
} else {
eval ('this.layer = document.all.IM'+ID);
eval ('this.img =
document.images[\'imgIM'+ID+'\']');
}
this.d = Math.round(Math.random());
this.s = Math.round(Math.random());
this.x = Math.round(Math.random()*2*xborneIM) -
xborneIM;
this.y = Math.round(Math.random()*2*yborneIM) -
yborneIM;
this.img.src = (this.d ==0) ? nomIMa : nomIMb;
this.anim = BougeObjIM;
this.changedir = ChangedirObjIM;
}
function BougeIM() {
var dx = xxaqIM-xaqIM;
if (Math.abs(dx) > 2) {
var ix = Math.round(dx/10);
if (Math.abs(ix) < 2 ) ix = dx > 0 ? 2 : -2;
xaqIM += ix;
zIM = 1;
}
else {
xaqIM = xxaqIM;
zIM = 0;
}
if (yyaqIM != yaqIM) yaqIM +=
Math.round((yyaqIM-yaqIM)/10);
for(var x=0; x < numObjIM; x++) {
if (dx != 0) {
if (dx < 0 && objIM[x].d == 1)
objIM[x].changedir();
if (dx > 0 && objIM[x].d == 0)
objIM[x].changedir();
}
objIM[x].anim();
}
}
function SourisEvIM(e) {
if (NS4) {
xxaqIM = e.pageX ;
yyaqIM = e.pageY ;
} else {
xxaqIM = event.clientX + document.body.scrollLeft ;
yyaqIM = event.clientY + document.body.scrollTop ;
}
}
function InitIM() {
if (VERSION4) {
for(var x=0; x<numObjIM; x++) objIM[x] = new
DefObjIM(x) ;
if (NS4) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = SourisEvIM;
setInterval("BougeIM();",50);
}
}
if (VERSION4 && ! NS4) {
for (var x=0; x<numObjIM; x++) {
document.write('<div id="IM'+x+'" style="position:
absolute; visibility: visible;">');
document.write('<img name="imgIM'+x+'" src="'+nomIMa+'"
height="'+heightIM+'" width="'+widthIM+'"
border="0"></div>');
document.write('</div>');
}
}
if (window.onload) {
if (window.RegExp) {
var regstr =
'^[^\\{]*\\{((.|\\t|\\n|\\r)*)}[^\\}]*$';
window.onload.toString().match(regstr);
window.onload = new Function (RegExp.$1+"; InitIM ();");
}
}
else window.onload = InitIM;
// --></SCRIPT>
|
Eh oui ! Il est encore plus "costaud" que l'autre !
Forcément : il comporte un plus grand nombre de variables de
calcul, du moins pour ce qui est du mouvement.
Vous installerez la totalité du script dans les balises
<HEAD> : ici aussi, sur une page vide, vous obtiendrez le
résultat ... à condition, aussi, de ne rien avoir
oublié !
Vous devez au moins savoir le minimum pour le mettre en oeuvre
avec vos images :
en rouge, l'adresse de
chacune des images : il y a en deux ... elles ne se retournent pas
seules, évidemment !
en bleu, les dimensions
de ces images : respectez-les comme sur une page normale.
n'utilisez pas des images trop gourmandes en octets :
évitez de saturer le PC du visiteur !
Il vous reste donc à réaliser 2 images
animées de votre crû grâce à votre logiciel
de dessin et d'animation.
Vous avez la possibilité de modifier certains
paramètres, dans des limites raisonnables !
Je ne vous dirai pas comment ...
;o) : à
vous d'essayer d'y comprendre quelque chose ...
Sachez toutefois que vous pouvez modifier vitesse, espacements
maximum et nombre d'images mises en oeuvre.
Creusez-vous un peu la cervelle ! Et amusez-vous bien
...
Comme il s'agit également d'un script faisant
appel aux calques, cet évènement a le même
avantage de pouvoir "planer" sur tous les objets de la page, y
compris photos et images animées.
