Roll-over preview tramite tooltip
Forse potrebbe interessarti anche...
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.
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
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.
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