Quella che proproniamo questa settimana è un'altra variante delle tante tecniche con cui è possibile creare piccoli box descrittivi (tooltip) dei link presenti in una pagina web. Sono in pratica un'alternativa personalizzabile nella grafica all'elemento <title>, con il suo monotono giallino. La tecnica è accomunata ad altre per la combinazione tra Javascript e CSS; se ne differenzia per la gestione del posizionamento del tooltip rispetto al link. La visualizzazione dell'esempio allegato vale più di tante vane parole. Lo script è tratto da Dynamicdrive.com.
- esempio.htm
## 1: LA SEZIONE JAVASCRIPT
La parte Javascript va inserita nel corpo della pagina, ovvero tra <body> e </body>.Per non creare confusione nel codice la posizione migliore è proprio immediatamente prima del tag </body> (come nell'esempio). Non riportiamo qui l'intera porzione di codice. In realtà lo script può essere lasciato così com'è, parte un paio di variabili all'inizio:
var offsetxpoint=-60 //Posizione del tooltip in orizzontale rispetto al link
var offsetypoint=20 //Posizione del tooltip in verticale rispetto al link
I valori si intendono in pixel. Basterà qualche prova su link presenti nelle varie posizioni della pagina per capire se i valori di default vanno bene o procurano problemi nella visualizzazione dei contenuti circostanti.
## 2: LA SEZIONE CSS
Per la personalizzazione dell'aspetto grafico del tooltip, invece, è fondamentale prestare attenzione alla parte CSS. L'esempio contiene una dichiarazione per il div con id '#dhtmltooltip' presente nella pagina (lo vedremo dopo):
#dhtmltooltip{
position: absolute;
width: 150px;
border: 2px solid black;
padding: 2px;
background-color: lightyellow;
visibility: hidden;
z-index: 100;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}
Tutte le regole, quelle relative ai colori, alo sfondo, alla larghezza, etc, possono essere modificate a piacere, ma non quella sulla posizione. La proprietà position deve essere impostata su absolute. L'ultima riga, subito dopo il commento, si applica solo a Internet Explorer e consente l'applicazione di un effetto drop-shadow al tooltip. Se si vuole eliminarlo basta cancellare l'ultima riga.
## 3: RICHIAMO INTERNO ALLA PAGINA WEB
All'interno della pagina dovremmo innanzitutto piazzare (in qualunque posizione) un div vuoto con id 'dhtmltooltip'. È quello che sarà poi riempito dal testo che desideriamo far comparire quando il mouse passa sopra il link:
<div id="dhtmltooltip"></div>
L'attivazione del tooltip avviene associando ai link che desideriamo il richiamo alla funzione 'ddrivetip':
<p><a href="http://www.html.it" onMouseover="ddrivetip('Il sito italiano sul web publishing')";
onMouseout="hideddrivetip()">HTML.it</a></p>
L'evento è onmouseover, il parametro da passare (tra parentesi e apici singoli) è il testo del tooltip. L'evento onmouseout, invece, richiama la funzione 'hideddrivetip' che nasconde il tooltip.
