Roll-over preview tramite tooltip

Abbiamo visto come sia facile creare tooltip normali e anche più complessi. Un altro modo facilissimo per fare degli spettacolari tooltip con preview di un’immagine è usando jQuery: lo script in questione è un plugin che pesa solo 2 kb e che può essere usato in molti modi, e soprattutto ha la funzione “intelligiente” di usare il testo inserito nell’attibuto TITLE per creare il ToolTip!

Il primo mostra semplicemente l’attributo TITLE del link come un “normale” tooltip:

<a class="tooltip" title="TOOLTIP" href="http://...">LINK</a>

Un altra possibilità è usarlo come preview di immagini, con o senza didascalie (sempre tramite l’uso del TITLE):

<a class="preview" title="DIDASCALIA" href="image.jpg">LINK</a>

Una terza bella possibilità e di associare ad un link testuale una immagine di anteprima, con didascalia (in questo caso il file di anteprima è richiamato tramite l’attributo REL):

<a class="screenshot" title="DIDASCALIA" rel="ANTEPRIMA.JPG" href="http://www....">LINK</a>

Come si può vedere, tra le tre versioni cambia la CLASSE: tooltip, preview e screenshot.
Il tutto va ovviamente poi “condito” con qualche righettina di codice CSS.

fonte: CSS globe

Altri sono arrivati qui cercando:
tooltip semplice.

2 pensieri su “Roll-over preview tramite tooltip”

  1. Un problema del script que muestra la vista previa de los enlaces es que la página no valida como XHTML si los ficheros de las imágenes no están en el mismo directorio que el script main.js porque el validador del W3C no permite el carácter “/” dentro del atributo “rel”. Dos posibles soluciones pueden ser:
    · Situar los ficheros de las previas en el mismo directorio del script (obvio).
    · Insertar en el código de main.js el path del directorio donde estén las imágenes de las previas.

  2. Felipe, gracias por esta solución!
    Traduco per chi non parla spagnolo, anche se il problema è “relativo”, perché si riferisce alla validazione W3C…
    Un problema dello script è che la pagina non è validata come XHTML se le immagini non sono nella stessa cartella dello script main.js, perché il validatore W3C non consente il carattere “/” dentro l’attributo “rel”.
    Due possibili soluzioni possono essere:
    – mettere i file delle anteprime nella stessa cartella dello script (ovviamente)
    – inserire nel codice di main.js il percorso della cartella dove stanno le anteprime

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.

Ricevi un avviso se ci sono nuovi commenti. Oppure iscriviti senza commentare.

You can add images to your comment by clicking here.