Tooltip e anteprime di immagini semplici con jQuery

Questa è la traduzione dell'articolo Easiest Tooltip and Image Preview Using jQuery di Alen Grakalic pubblicato originariamente su CSS Globe l'8 Maggio 2008. La traduzione viene qui presentata con il consenso dell'editore e dell'autore.

Amo jQuery e il modo in cui semplifica la vita di uno sviluppatore. Sebbene abbia impiegato un po' di tempo per accettarla e sebbene preferisca scrivere per conto mio i Javascript che mi servono, non posso negare i vantaggi che porta con sé. Recentemente ho lavorato su un progetto che richiedeva l'anteprima di immagini con rollover. Li conoscete, si tratta di quei popup che appaiono quando si passa con il mouse su un link o su una miniatura di immagine.

Dato che stavamo già usando jQuery su altre parti del progetto, ho deciso di prendermela comoda e capire cosa si potesse fare con questa libreria. Così ho tirato fuori uno script che più facile non si può! La cosa migliore è che può essere applicato per diversi scopi. Oggi vi mostrerò tre semplici esempi d'uso che usano lo stesso, semplicissimo script. Si chiama main.js e lo trovate, insieme a jQuery, in questo pacchetto zip che contiene tutti gli esempi che vedremo nell'articolo.

Caratteristiche principali

Lo script aggiunge un elemento al body quando si passa con il mouse su un certo oggetto. L'aspetto di questo elemento è predefinito tramite CSS (sia per il posizionamento assoluto sia per gli stili visuali), così tutto ciò che dobbiamo fare è riempire l'elemento con del contenuto, calcolare la posizione del mouse e farlo muovere di conseguenza. Quando il cursore si muove sull'oggetto l'elemento si sposta con esso e quando il cursore si sposta fuori dall'oggetto l'elemento scompare.

Esempio 1: il tooltip più semplice

Lo script prende il valore dell'attributo title di un elemento a e lo inserisce in un piccolo box. Il codice HTML è così:

Ecco l'esempio.

Esempio 2: anteprime di immagini

In questo caso abbiamo una serie di thumbnail. Quando si passa con il mouse su una thumbnail lo script carica un'immagine che abbiamo linkato tramite l'attributo href su un elemento a. Ciò rende il metodo accessibile, perché anche con Javascript disabilitato è possibile raggiungere l'immagine ingrandita. Ecco l'HTML:

Se volete una didascalia potete usare l'attributo title:

Ecco l'esempio.

Esempio 3: link con anteprima dell'URL

Questo esempio richiede un po' di sforzo in più, ma potrebbe essere un ottima aggiunta da inserire come extra sul vostro sito. Quello di cui avrete bisogno è un piccolo screenshot della pagina collegata con il link. Metterete l'indirizzo dell'immagine in un attributo rel dell'elemento a e lo script farà il resto:

Di nuovo, potete usare una didascalia aggiungendo l'attributo title:

Anche per questo esempio è disponibile una demo.