Une souris suivie comme son ombre ...

Voilà bien un évènement dans la plus pure tradition du gadget !

Et certains aiment cela ! Tant et plus que si je vous propose cette page, c'est parce que nombre de mes lecteurs me le demandent ... Alors, après recherches et cogitations intenses, insomnies provoquées par le titillement régulier du "il y a quelque chose qui manque ...", je vous livre tout de go un bel exemple ... d'inutilité sur le Web ... !

Point n'est besoin d'un grand discours : vous voyez le résultat en promenant votre souris sur la page.

Et point n'est besoin d'une analyse complète du script : vous y seriez pour un bon moment, d'autant que je devrais vous faire un cours presque complet sur Html, Javascript, les calques, etc ... Comme, de plus, je vous ai déjà conseillé maintes fois de vous offrir un bon bouquin sur le sujet, je me contenterai de vous livrer le script et quelques informations de paramétrage. Retenez votre souffle :

<SCRIPT LANGUAGE="JavaScript"><!--

var DrapX=10

var DrapY=-20

var Deb='<Font face=Arial size=2 color="red"><B>'

var Texte='Bienvenue dans mon site !'

var Espace=7

var Vitesse=10

var Fin='</B></FONT>'

var Ok=0;var x,y;txt=Texte.split("")

var Chaine=Texte.length-1;var t=0;

xp= new Array();yp= new Array()

for (i=0;i<Chaine;i++){xp[i]=-50;yp[i]=-50;

if (navigator.appName == "Netscape") {

document.write('<LAYER NAME="ly'+i+'" top=-50>'+Deb+txt[i]

+Fin+'</font></LAYER>');t=1;}else{

document.write('<span ID="ly'+i+'" STYLE="Position:relative; top:-50;">'

+Deb+txt[i]+Fin+'</font></span>');t=0};}

function Capte(ev){Ok=1

if (t){x=ev.pageX+DrapX; y=ev.pageY+DrapY}

else {x=event.clientX+DrapX;

y=event.clientY+DrapY+document.body.scrollTop};}

function Bouge(){if (Ok){

for (a=Chaine;a>0;a--){

xp[a]=xp[a-1]+Espace

yp[a]=yp[a-1];}

xp[0]=x+Espace;yp[0]=y

if (t){for (a=0;a<Chaine;a++){

with(eval("document.ly"+a)){

left=xp[a];top=yp[a];};};}else{

for (a=0;a<Chaine;a++){

with(eval("document.all.ly"+a+".style")){

posLeft=xp[a];posTop=yp[a];};};};}

setTimeout("Bouge()",Vitesse);}

if(t) document.captureEvents(Event.MOUSEMOVE);

document.onmousemove = Capte;

Bouge()

//--></script>


Vous installerez la totalité du script dans les balises <HEAD> : même sur une page vide, vous obtiendrez le résultat ... à condition de ne rien avoir oublié !

en rouge ... cela vous dit quelque chose, n'est-ce pas : vos choix de fonte, comme dans un document Html.

en bleu, l'espace (en pixels) entre chaque caractère

en vert, la vitesse de réaction au script : plus le texte est long, plus la réaction est lente !

évitez un texte trop long : 50 caractères au maximum !

Une série de variables intégrées dans deux fonctions pour animer le gadget et hop ! ... le tour est joué !

 Comme il s'agit d'un script faisant appel aux calques, son avantage est de pouvoir superposer l'évènement sur tous les objets de la page, y compris photos et images animées.

Vous avez tout compris ? Non ? Eh bien, tant pis : débrouillez vous ... ;o)parce que je ne recommencerai pas !

Quoique ... vous trouverez un autre script de la même veine (mais plus poétique, peut-être ?) dans un autre exposé : allez donc fouiller dans la liste !