Livello di difficoltà: |
|
Dynamic Html è una tecnologia approvata dal W3C per la creazione di siti Web dinamici ed interazioni client side con l'utente. In questa sezione sono disponibili centinaia di esempi ed arretrati della mailing list "Una demo Dhtml a settimana".
|
| |
Testo che segue il mouse
Arretrati lista "Una demo Dhtml a settimana"
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.
|
