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](/ckfinder/userfiles/images/imgpreview.jpg)
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