Pubblicato da: fedeweb | settembre 11, 2008

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.

Scarica il sorgente

Guarda l’esempio

Advertisements

Responses

  1. il link ai sorgenti mi da errore

  2. Grazie mille per la segnalazione!! ho sistemato

  3. 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?

  4. 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!!

  5. 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.

  6. Nell’head (menu) ho inserito:

    Nell’head (icone) ho inserito:

  7. 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>

  8. Ciao! mandami il codice per e mail che provo a dargli un’occhiata ok?


Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

Categorie

%d blogger hanno fatto clic su Mi Piace per questo: