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.