Anteprima delle immagini in un tooltip
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.
Se non sai cosa sono, guarda questo video Ora non sai come abbonarti? Guarda questo video
Inoltre potrai seguirmi su twitter, facebook o friendfeed!
Articoli simili che potrebbero interessarti
Ciao, mi chiamo Federico Pian e lo scopo di questo blog è condividere con te la mia passione per la grafica e il web design.
il link ai sorgenti mi da errore
Grazie mille per la segnalazione!! ho sistemato
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?
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!!
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.
Nell’head (menu) ho inserito:
Nell’head (icone) ho inserito:
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>
Ciao! mandami il codice per e mail che provo a dargli un’occhiata ok?
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
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
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
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
Ottimo MisterB. Grazie per il tuo contributo
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!
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?