Risorse per webmaster

L A   C O M U N I T À   V I R T U A L E   I T A L I A N A   P E R   W E B   M A S T E R S

 
 
      Tecnologie
      HTML
      CSS
      DHTML
      FLASH
      ASP
      PHP
      JSP
      PERL
      XML
      SMIL
      WIRELESS
      PALMARI
      APACHE
      MYSQL
      PICOSQL
 
      Grafica
 
      Servizi
 
      Raccolte
 
      Recensioni
 
      Analisi
 
      Disclaimer

   Per tutti
 
  .: Magazine
  .: Editor
  .: Appunti
  .: Gratis
  .: Scripts
  .: Components
 
   Home page

Partner
Comunicati stampa
Proposte di viaggio
Prenotazione hotel
Prenota vacanze
Accessori palmari
Cerca alberghi
Guide turistiche

versione stampabile Mostra una versione adatta per la stampa  

Livello di difficoltà:Livello di difficoltà: medio  
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.
 

 
 
Home > dhtml > teoria > 2000 > aprile > ...   © 1999-2017 Risorse.net, tutti i diritti riservati