Box che illustrano il contenuto di un link

Avete fatto caso ai box che appaiono nella pagina dei link quando passate con il mouse sopra i collegamenti? Beh, realizzarli non è poi così difficile. Diciamo che lo spunto lo ho preso da un javascript che ho trovato in rete, ma sebbene il concetto sia lo stesso, ho deciso di partire da zero e scrivere da me tutto il codice in modo da poterlo configurare come meglio mi pare.
Vediamo subito qui sotto il codice che lo genera:

<div id="box" style="position:absolute;visibility:hidden"> <font face="arial"><h6> <span id="caption" style="font-weight:bolder"></span><br> <span id="testo" style="padding-left:2px"></span><br> <span id="copyr" style="text-align:right">AlexMfM Box ver. 1.0</span> </div></h6> <script language="javascript"> function mostra_box(cpt,txt,cpt_bg,txt_bg,cpt_fg,txt_fg) { var pos_x = event.offsetX; var pos_y = event.offsetY; /* NON si deve usare event.clientX e event.clientY perche' altrimenti quando si scrolla in basso la pagina, il box non resta accanto al link, ma viene posizionato piu' in alto, dovuto al fatto che clientX e clientY prendono come origine dall'angolo superiore sinistro del canvas (area visibile della finestra) mentre top e left dello style, hanno come origine l'angolo in alto a sinistra dell'inizio del documento! Usando invece offsetX e offsetY si da' la stessa origine. */ box.style.width=250; caption.style.width=250; testo.style.width=250; copyr.style.width=250; box.style.top=pos_y+10; box.style.left=pos_x+10; box.style.border='1px solid '+cpt_bg; caption.style.backgroundColor=cpt_bg; testo.style.backgroundColor=txt_bg; copyr.style.backgroundColor=cpt_bg; caption.style.color=cpt_fg; testo.style.color=txt_fg; copyr.style.color=cpt_fg; caption.innerHTML=cpt; testo.innerHTML=txt; box.style.visibility='visible'; } function nascondi() { box.style.visibility='hidden'; } </script>

La prima parte, fuori dallo script, crea il box vero e proprio. Per l'elememto div si stabilisce che deve avere un posizionamento assoluto e deve di default essere invisibile. I tre elementi span al suo interno sono relativamente: la caption, ovvero la barra del titolo, l'elemento in cui andrà il testo e l'ultimo è la riga dove andrà un messaggio uguale per tutti i box generati che in questo caso contiene il 'copyright' o semplicemente il nome del box. Nello script ci sono le due funzioni che regolano il box. Gli argomenti della funzione mostra_box() sono i seguenti: cpt è una stringa contenente il testo della caption; txt è una stringa contenente il testo dell'area di testo; cpt_bg è il colore di sfondo della caption; txt_bg è il colore di sfondo dell'area testo; cpt_fg è il colore del testo della caption; txt_fg è il colore del testo dell'area di testo. Si inizia prelevando le coordinate del mouse nel punto in cui avviene l'evento. Leggete attentamente il commento in quanto fa capire come funziona il prelievo delle coordinate del punto dell'evento. Successivamente si imposta la larghezza di tutti gli elementi del box a 250 pixel. Subito dopo si definiscono le proprietà del box stesso: l'elemento box viene posizionato 10 pixel in basso e a destra della punta del cursore, gli viene impostato il bordo (un pixel solido del colore di sfondo della caption), vengono impostati gli sfondi di caption e testo, i colori del testo di caption e area di testo. Notate che in questo tipo di box le proprietà dell'elemento copyr sono le stese della caption. Successivamente si impostano le scritte nei vari elementi e si rende il box visibile. La funzione nascondi() si limita a farlo scomparire.

Ora mi chiederete: "ma se lo metto così non succede niente: come mai?".
Semplice.
Per far funzionare tale script bisogna richiamare la funzione che mostra il box quando il mouse è sopra il link in questo modo:
<a href="pippo.html" onmouseover="mostra_box('Testo caption', 'Testo area di testo', 'orange','black','black','orange')" onmousemove="mostra_box('Testo caption', 'Testo area di testo', 'orange','black','black','orange')" onmouseout="nascondi()">Pippo</a>
Il fatto che lo stesso codice sia necessario specificarlo per onmouseover e per onmousemove deriva dal fatto che solo in questo modo è possibile far muovere il box quando il mouse si muove sopra il link. Se si fosse messo soltanto onmouseover, il box sarebbe stato visualizzato soltanto nel punto in cui il mouse 'entrava' sopra il link e sarebbe stato fermo lì fino a che il puntatore non fosse uscito dal collegamento.
Come potete vedere, in caso di esigenze particolari questo script è pienamente configurabile a vostro piacere ed è possibile aggiungere ulteriori campi all'interno del tag <div>, ulteriori elementi grafici o modificare quelli già presenti.

ATTENZIONE: un bug che affligge questo script è che in presenza di una animazione fatta con flash, il box non viene visualizzato. L'unico modo di visualizzarlo è quello di impostare il testo della caption e dell'area di testo direttamente nei tag <span> e così verrà visualizzato correttamente. Dovrà essere modificata anche la funzione cancellando gli argomenti 'cpt' e 'txt' e tutti i loro riferimenti nello script ed omettendo li stessi argomenti nella chiamata di funzione fatta dentro il link.