Tempo fa avevo scritto un articolo su come creare dei tooltip gradevoli, grazie a javascript.
Oggi vedremo come ottenere lo stesso effetto con le immagini, cioè al passaggio del mouse sulle miniature compariranno le anteprime, con la didascalia, il tutto sfruttando la libreria jquery.
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.
Mirko D'Isidoro on 
Rosario on 
Tamal on 
federica on 
fedeweb on 
24 settembre 2008 at 12:47
il link ai sorgenti mi da errore
24 settembre 2008 at 13:53
Grazie mille per la segnalazione!! ho sistemato
12 novembre 2008 at 14:03
Salve, dalle preview e’ proprio quello che mi serve ! pero’ tutti i link mi danno errore e non posso scaricare le sorgenti ? Dove posso trovarle gentilmente?
12 novembre 2008 at 23:13
Ciao, quando passi con il mouse sopra “Scarica il sorgente” ti compare una finestra con in mezzo scritto “Snap Click for .zip file”. Premi li e vedrai che funziona..ciao!!
24 febbraio 2009 at 16:28
Ho provato ad adattarlo alle mie esigenze, ma con qualche problema:
ho nella stessa pagina un menu testuale a cui ho associato a ogni voce la classe
screenshot (es.: Voce del menu ).
Nell’head ho inserito:
Nel main-Testo.js ho variato la posizione
xOffset = -30;
yOffset = -100;
Tutto va bene, la pagina è validata W3C e si vede benissimo su qualsiasi browser.
——————————————————————————————
Nella stessa pagina, ho delle icone posizionate sulla destra a cui ho applicato la classe preview (es.: ).
Nell’head ho inserito:
Anche in altraCartella/menu/main-lato.js, ho variato la posizione così:
xOffset = 100;
yOffset = -550;
——————————————————————————————
Risultato: le immagini del menu testuale (classe screenshot), prendono la stessa posizione delle immagini ingrandite della classe preview.
Non sono un genio, questo è evidente, dunque non riesco a comprendere dov’è il problema visto che ho nominato in modo diverso i files .js e che sono posizionati in cartelle differenti.
Approfitto per porre un altro quesito: per la classe preview è possibile che ogni immagine resti al centro dello schermo senza muoversi con lo spostarsi del mouse?
Grazie.
24 febbraio 2009 at 16:30
Nell’head (menu) ho inserito:
Nell’head (icone) ho inserito:
24 febbraio 2009 at 16:34
Scusa, ma non mi fa inserire gli script
Riprovo eliminando le parentesi ad angolo e sostituendole con tre puntini:
primo
…script src=”Menu/jquery-Testo.js” type=”text/javascript”…/script… …script src=”Menu/main-Testo.js” type=”text/javascript”… …/script…
secondo
…script src=”altraCartella/menu/jquery-lato.js” type=”text/javascript”… …/script…
…script src=”altraCartella/menu/main-lato.js” type=”text/javascript”… …/script>
25 febbraio 2009 at 13:43
Ciao! mandami il codice per e mail che provo a dargli un’occhiata ok?
13 ottobre 2009 at 14:58
Ciao, ho cambiato un pò il tuo codice per permettere l’onMouseOver la comparsa dell’anteprima ma al click farlo andare in un’altra pagina, nel particolare ho modificato main.js e ho messo al posto di “this.href” “this.id e poi nella pagina che richiama ho messo come contenuto dell’href la destinazione della pagina e come id il percorso dell’immagine… non so se sono stato chiaro e non so se sono stato utile ma almeno c’ho provato
14 ottobre 2009 at 14:45
Ciao MisterB e benvenuto in questo blog. Prova a mettere in un commento il codice che hai modificato, così possiamo tutti capire meglio quello che hai provato a fare
14 ottobre 2009 at 15:33
Cerco di spiegarmi, in main.js alla riga 25 ho sostituito
$(“body”).append(“”+ c +”");
con
$(“body”).append(“”+ c +”");
e all’interno del file che richiama ho modificato lo standard
<a href=”immagine_grande” rel=”nofollow”></a>
con
<a href=”destinazione” rel=”nofollow”></a>
Il vantaggio è che ho sempre l’anteprima ma al click posso mandarlo dove voglio io, sfruttando la a.
Spero sia più chiaro, funziona tutto correttamente come volevo
Saluti
Simone
14 ottobre 2009 at 15:36
mmm scusate non mi fa scrivere il codice… cmq ho sostituito alla riga 25 di main.js href con la parola id e all’interno del file che richiama lo script il percorso dell’immagine grande l’ho scritto nell’id e non nell’href sempre cmq nel tag a
15 ottobre 2009 at 16:22
Ottimo MisterB. Grazie per il tuo contributo
24 novembre 2009 at 19:39
ciao Fedeweb, premetto che non sono molto esperto….ho provato ad utilizzare questa libreria ma ho qualche difficoltà. L’immagine me la carica ma non mi fa l’effetto tooltip. Ho caricato i due script js sotto e sembra che i percorsi siano corretti…ma non va!
chiedo un aiutino!
25 novembre 2009 at 10:21
Ciao tsenglabs e benvenuto su Fedeweb
Cosa intendi quando dici che ti carica l’immagine ma non crea l’effetto tooltip?
Hai provato a scaricare i sorgenti?
25 novembre 2010 at 20:22
Ciao Fedeweb, ho provato a riproporre questo esempio in un sito su cui sto lavorando, ma avrei un problemino:
dovrei fare una photogallery con delle miniature 60x60px, che in hover mi fanno apparire una preview di 220x160px circa. Cliccando sulle miniature dovrebbero apparire gli ingrandimenti delle immagini (circa 800x600px).
In questo modo devo lavorare con tre versioni della stessa immagine, ma con l’esempio da te proposto non riesco mai ad inserire quella della preview o l’ingrandimento finale…
Come dovrei fare? hai qualche soluzione?
Spero di essere stata chiara, anche perchè come avrai capito non sono molto esperta di javascript e altro.
Aspetto una risposta! Grazie
26 novembre 2010 at 14:31
Ciao Sindell e benvenuta nel blog
Nel commento di MisterB, trovi la risposta
27 novembre 2010 at 19:19
Grazie infinite per la tempestiva risposta!!!
… chiedo scusa ma non mi ero accorta del post di MisterB
30 novembre 2010 at 13:27