Testo che segue il mouse

Arretrati lista "Una demo Dhtml a settimana"
di Risorse.net

CONOSCENZE CONSIGLIATE PER QUESTO ARTICOLO: Html, Css, Javascript

COMPATIBILITÀ: Ms Ie, Netscape
FILES ESTERNI: Nessuno
Visualizza la demo
Scarica la demo

Quasi un anno fa, esattamente in data 16 Luglio 1999, abbiamo visto un esempio che permetteva ad un'immagine Gif o Jpg di seguire il cursore del mouse in qualsiasi movimento all'interno della finestra del browser. Per chi si fosse perso quel bollettino, lo può recuperare tra gli arretrati di questa lista all'indirizzo www.risorse.net/dhtml. Oggi ritorniamo sull'argomento, con una demo simile in certi aspetti, ma che ci permette di associare un testo al puntatore. In fasi di movimento del mouse, l'effetto creato è notevole...

<style>
.spanstyle {
position:absolute;
visibility:visible;
top:-50px;
font-size:8pt;
font-family:Arial;
font-weight:bold;
color:white;
}
</style>

Questo primo foglio di stile (se non sapessi cosa fosse, visita www.risorse.net/css), definisce l'aspetto del testo che dovrà seguire il cursore: quindi grande 8pt (punti), di carattere Arial, grassetto e bianco.

var x,y
var step=20
var flag=0

// Your snappy message. Important: the space at the end of the

sentence!!!
var message="WWW.RISORSE.NET "
message=message.split("")

var xpos=new Array()
for (i=0;i<=message.length-1;i++) {
xpos[i]=-50
}

var ypos=new Array()
for (i=0;i<=message.length-1;i++) {
ypos[i]=-50
}

function handlerMM(e){
x = (document.layers) ? e.pageX :

document.body.scrollLeft+event.clientX
y = (document.layers) ? e.pageY :

document.body.scrollTop+event.clientY
flag=1
}

function makesnake() {
if (flag==1 && document.all) {
for (i=message.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+step
ypos[i]=ypos[i-1]
}
xpos[0]=x+step
ypos[0]=y

for (i=0; i var thisspan = eval("span"+(i)+".style")
thisspan.posLeft=xpos[i]
thisspan.posTop=ypos[i]
}
}

else if (flag==1 && document.layers) {
for (i=message.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+step
ypos[i]=ypos[i-1]
}
xpos[0]=x+step
ypos[0]=y

for (i=0; i<message.length-1; i++) {
var thisspan = eval("document.span"+i)
thisspan.left=xpos[i]
thisspan.top=ypos[i]
}
}
var timer=setTimeout("makesnake()",30)
}
</script>

In questo script, viene definita la sintassi per creare l'animazione finale. E' qui, che bisogna specificare il testo da far muovere, all'interno della riga:

var message="WWW.RISORSE.NET "

Tutto questo nella testa (o <head>) del documento. Nel corpo invece (il cosidetto <body>) vengono inseriti i richiami al Javascript precedentemente esaminato:

<body onLoad="makesnake()" style="width:100%;overflow-x:hidden;overflow-y:scroll" bgcolor="#000000" leftmargin="0" link="#7979FF" vlink="#A39E8F" topmargin="0"> <script>
<!-- Beginning of JavaScript -
for (i=0;i<=message.length-1;i++) {
document.write("<span id='span"+i+"' class='spanstyle'>")
document.write(message[i])
document.write("</span>")
}
if (document.layers){
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = handlerMM;
// - End of JavaScript - -->
</script>
</body>

Nessuna modifica va apportata nel codice appena esaminato.

© Risorse.net (www.risorse.net)
pagina in versione stampabile:
http://www.risorse.net /dhtml/teoria/2000/aprile/34.asp?print=ok