.:° JsDir °:. JavaScript .:° Gli script del webmaster e dei collaboratori al sito °:. Bring Your Site To Life®

      Lo script in questa scheda vi consente di avere un testo, in un layer, che segue il puntatore del mouse quando si trova sopra un link. È quello che si chiama "Tooltip" che esisteva già per le immagini (con il parametro "ALT"), ma li fu inserito all'inizio di Internet, quando le connessioni non erano molto veloci (o si pagavano un tanto al byte) e spesso si usava navigare senza immagini... circa due ere geologiche fa... alla fine degli anni '80 :-).
      Nei browser di nuova generazione una cosa simile è stata inserita con il parametro TITLE per i tag HREF, ma il tooltip che vi presento, oltre a visualizzare il testo, segue lo spostamento del mouse, una cosa simile a quel che avrete visto già in qualche filmato Flash.
      Questo è lo script, stavolta il commento sarà abbastanza breve:

<SCRIPT>
<!--
var tips=new Array()
   tips[0]="Tip numero 0";
   tips[1]="Tip numero 1";
   tips[2]="Tip numero 2";
   tips[3]="Tip numero 3";

var nn=document.layers?true:false;
var DOM2=document.getElementById?true:false;
var NN6=DOM2&&navigator.userAgent.toLowerCase().indexOf("netscape")!=-1;
var toggle=false,tiplayer=null,tiplayerwidth=null;

nn?window.captureEvents(Event.MOUSEMOVE):null;

function Inizia()
   {
   tiplayer=nn?document.layers.tooltip:DOM2?document.getElementById("tooltip"):document.all.tooltip
   tiplayerwidth=nn?tiplayer:tiplayer.style;
   }


function tipWrite(id)
   {
   tiplayerwidh.width=tips[id].length*7;
   if (nn){
      tiplayer.document.open();tiplayer.document.write(tips[id]);tiplayer.document.close();}
      else tiplayer.innerHTML=tips[id];
   }
	
function tip(n)
   {
   toggle=!toggle;
   if (toggle){
      tipWrite(n);
      nn?window.onmousemove=mostra:document.onmousemove=mostra;
      tiplayerwidth.visibility='visible';}
      else{
      nn?window.onmousemove=null:document.onmousemove=null;
      tiplayerwidth.visibility='hidden';}
   }

function mostra(mosso)
   {
   if (nn){
      tiplayer.top=mosso.pageY+10;
      tiplayer.left=mosso.pageX+10;}
   else
      if (DOM2&&NN6){
      tiplayer.style.top=mosso.pageY+10;
      tiplayer.style.left=mosso.pageX+10;}
      else{
         tiplayer.style.top=window.event.clientY+10;
         tiplayer.style.left=window.event.clientX+10;}
   }
//-->
</SCRIPT>

      La prima parte dello script contiene l'array dei tips, cioè dei testi che verranno visualizzati sui links. Continua con le solite definizioni di variabili utili nel DHTML per riconoscere il browser. L'ultima variabile ("toggle") ci servirà più avanti per nascondere e visualizzare il layer, a "tiplayer" assegneremo l'oggetto per poterlo visualizzare e muovere, mentre a tiplayerwidth assegneremo ancora l'oggetto, ma per modificarne dinamicamente le dimensioni.
      Subito dopo le variabili, l'istruzione che segue scatta solo per Netscape4.x e serve ad intercettare il movimento del mouse. La vedremo di nuovo fra poco.
      Di queste due assegnazioni si occupa la funzione "Inizia()" lanciata come al solito da onLoad() nel BODY della pagina.
      Passiamo un attimo al codice HTML per aver più chiaro il funzionamento del resto dello script:

<HTML>
<BODY BGCOLOR="#ffffff" onLoad="Inizia()">
<A HREF="#" onMouseOver="tip(0)" onMouseOut="tip()">prova link numero 0</A> <BR> <BR>
[ ... ]
<DIV ID="tooltip" STYLE="position:absolute;top:1;left:1;width:1;height:20; [...
   ...] layer-background-color:#ffff00;background:#ffff00;visibility:hidden"></DIV>
</BODY>
</HTML>

      Come vedete c'è subito l'event-handler "onLoad()" nel BODY, poi un esempio di come dovranno essere scritti i links nel documento. Vengono usati gli event-handler "onMouseOver()" e "onMouseOut()" per rilevare il passaggio del mouse, questi chiamano la funzione "tip()" alla quale viene passato un parametro numerico: è l'indice dell' elemento nell'array che identifica il tooltip da visualizzare su quel determinato link.
      Il layer viene posto alla fine del documento, immediatamente prima del </BODY>. Questo solo per compatibilità con IE4 (non sottovalutiamolo, Win98 è ancora il browser più diffuso!), infatti se lo posizioniamo in alto quando andiamo a visualizzarlo tutto il resto del documento si sposta.
      Notate che nel layer ho dato un colore di sfondo, potete cambiarlo o eliminarlo se volete che il tooltip sia trasparente.
      Come abbiamo visto nel documento, l'attivazione del layer è comandata dalla funzione "tip()".
      Questa funzione per prima cosa inverte il valore della variabile "toggle", quando diventa true il tooltip viene scritto e visualizzato, quando diventa false il tooltip viene nascosto. Ora dal momento che sia onMouseOver che onMouseOut chiamano la stessa funzione e che la variabile parte da false (v. l'inizio dello script) la variabile diventa true quando il mouse è sul link (onMouseOver) e viceversa.
      Se "toggle" ha assunto il valore di true viene eseguita la funzione "tipWrite(n)", dove "n" è il numero passato dall'event-handler onMouseOver nel link.
      tipWrite() per prima cosa ridimensiona la larghezza del livello che viene impostata al valore di tips[id].length*7, cioè alla larghezza (in caratteri) del tooltip moltiplicato per 7. Questo valore (7) è del tutto arbitrario da un po' di prove che ho fatto è risultato il valore più adatto per allargare adeguatamente il livello di quanto basta per il font di default del browser. Naturalmente dovrete variarlo se cambiate tipo o larghezza del font nel tooltip.
      Le ultime due righe della tipWrite() scrivono nel layer il testo, rispettivamente con la sintassi richiesta da Netscape 4.x e dagli altri browser.

      Tornando alla funzione tip(), la riga seguente serve per aggangiare l'evento "mouse che si sposta" alla funzione mostra(), ancora con sintassi per NN4.7 ed... il resto del mondo. Poi il layer viene reso visibile. Qui termina il lavoro di tip(), le righe comprese nell'else scattano quando toggle è false, in questo caso la funzione mostra() viene sganciata dal movimento del mouse ed il layer viene nascosto.
      L'ultima funzione (mostra()) non fa altro che modificare la posizione del layer in base alla posizione assunta dal mouse. I tre blocchi riguardano rispettivamente Netscape 4.7, i browser recenti (IE5+ e NN6) ed IE4.
      Il livello viene posto 10 pixel a destra e in basso rispetto alla manina, valori che naturalmente potete variare.

      Mi preme dire un'ultima cosa: lo script non è perfettamente compatibile con Opera (ed infatti il livello non viene visualizzato), ma solo perché non sono riuscito a trovare un modo per scrivere dinamicamente nel layer. Qualsiasi suggerimento è bene accetto, anzi richiesto, perché per il resto lo script funziona perfettamente ed in effetti si attiva, come potrete rendervi conto scrivendo qualsiasi cosa all'interno del <DIV ... ></DIV>. Sempre per Opera ho impostato il WIDTH del livello ad 1 nello STYLE, se provate a cambiare questo valore vedrete un quadratino giallo (cioè del colore di sfondo) che segue il mouse.

Riccardo

	Parli JavaScript? Non tenerlo per te! JsDir cerca collaboratori. Se gli UserScript ti stanno stretti e vuoi inserire delle FAQ, dei Tips&Tricks, o anche uno StaffScript, se vuoi scrivere un tutorial o recensire un libro... insomma se parli JavaScript segui questo link. È un'occasione per farti conoscere e dimostrare le tue capacità!!!