Lo script che presentiamo è opera di un giovane tedesco, Gerd Tentler. È distribuito come freeware e pertanto liberamente riutilizzabile, ma come al solito sarebbe buona norma dare il giusto credito all'autore lasciando intatte le note incorporate nello script.
Cosa fa? Mostra un piccolo tooltip descrittivo ogni qual volta si passa su un link. Una funzione che può risultare utile in molti casi. Con link testuali per cui si voglia fornire all'utente informazioni aggiuntive, ovviamente, ma anche su immagini o mappe di immagini. La visualizzazione dell'esempio fornirà al riguarda ulteriori spunti di implementazione. Veniamo al funzionamento.
Lo script si compone di una semplice sezione Javascript da inserire nel corpo della pagina, esattamente nel punto in cui desideriamo far comparire la foto della webcam.
- esempio.htm
## 1: LA SEZIONE JAVASCRIPT
Dal momento che lo script è piuttosto lungo, la soluzione migliore è quella di creare un file esterno con estensione .js. Non ci soffermeremo su tutte le funzioni che lo compongono. Del resto la parte che ci interessa davvero è quella iniziale, che contiene le variabili da modificare.
In particolare, si tratta di personalizzare l'aspetto grafico del tooltip. Vediamo il codice:
this.width = 200; // larghezza (pixels)
this.bgColor = '#FFFFC0'; // colore di sfondo
this.textColor = '#A00000'; // colore del testo
this.borderColor = '#D00000'; // colore del bordo
this.opacity = 80; // opacità
this.cursorDistance = 5; // distanza dal cursore (pixels)
Si tratta di appena 5 parametri, la cui funzione è chiaramente comprensibile dalle note commentate. Tutto il resto dello script può essere lasciato intatto (a meno di non volerlo usare come base di partenza per ulteriori esperimenti).
C'è da fare una considerazione. I valori impostati qui per larghezza e opacità, diventano quelli di default, ma possono essere modificati, come vedremo, a partire dall'HTML.
## 2: LA SEZIONE HTML
Nella pagina HTML su cui vogliamo applicare l'effetto dovremo innanzitutto collegare il file tooltip.js. Basta la classica istruzione all'interno della sezione <head> della pagina:
<script language="javascript" src="tooltip.js"></script>
Ma la parte davvero fondamentale viene più avanti. I link per cui vogliamo far apparire il tooltip dovranno richiamare le funzioni principali dello script e passare alcuni parametri. Vediamo un primo esempio:
<a href="#" onMouseOver="toolTip('<strong>HTML.it</strong>: il sito italiano sul Web Publishing')" onMouseOut="toolTip()">Esempio 1: default</a>
La comparsa del tooltip è attivata dall'evento onMouseOver. Esso richiama la funzione 'toolTip'. Attenzione. Almeno un parametro è obbligatorio: il testo da mostrare! Come si vede, esso potrà essere opportunamente formattato usando specifici tag HTML (nel nostro caso il grassetto).
L'evento onMouseOut, collegato alla funzione 'toolTip' senza parametri fa sì che il tooltip scompaia.
Oltre che il testo, si può passare come parametro anche un valore di larghezza che sovrascrive quello di default, come mel secondo esempio, in cui il tooltip sarà largo 350px:
<a href="#" onMouseOver="toolTip('<strong>HTML.it</strong>: il sito italiano sul Web Publishing', 350)" onMouseOut="toolTip()">Esempio 2: settaggio larghezza</a>
