Il contenuto di questa pagina richiede una nuova versione di Adobe Flash Player.

Scarica Adobe Flash Player

    Anteprima delle immagini in un tooltip con jQuery
       

Oggi vedremo come ottenere, al passaggio del mouse su delle miniature di foto, le anteprime, con la didascalia, il tutto sfruttando la libreria jquery.

”gallery

Per capire meglio di cosa si tratta guardate l’esempio.

Prima di cominciare a seguire la spiegazione scaricate i file necessari.

Vediamo come ottenere questo effetto, qui di seguito:

1) tra i tag <head> e </head> inserite queste righe di codice

<script src=”jquery.js” type=”text/javascript”></script>
<script src=”main.js” type=”text/javascript”></script>

2) Per le miniature dovete scrivere questo codice; in questo primo esempio la didascalia non compare.

<a href=”1.jpg” class=”preview”><img src=”1s.jpg” alt=”gallery thumbnail” /></a>

Se invece volete aggiungere anche la didascalia dovete aggiungere il tag title:

<a href=”image.jpg” class=”preview” title=”Great looking landscape”>Roll over to preview</a>

Nella fonte da cui ho preso le informazioni sono presenti altri due esempi per sfruttare i tooltip in modi diversi da quelli proposti nell’articolo.

Scarica il sorgente

Guarda l’esempio

© 2018 - Tutti i diritti sono riservati