Main menu

Pages

Mostrare un tooltip personalizzato al passaggio del cursore su una foto

Quando si pubblica una immagine in una pagina web, oltre al suo URL diretto, si possono opzionalmente inserire altri parametri come attributi, quali la larghezza, l'altezza e il bordo.

Dal punto di vista SEO, è fondamentale l'attributo Alt, ovvero il Testo Alternativo, che serve per digitare un titolo o una descrizione testuale della foto, che verrà mostrato dal browser a chi apre la pagina qualora l'immagine non si possa caricare o se sia troppo lenta a farlo.

Meno importante per i motori di ricerca, ma particolarmente utile per i navigatori, è il tag Title, che serve sempre per digitare un titolo o una descrizione della foto ma che il lettore visualizza come tooltip, quando passa con il mouse sopra alla immagine.

Il tooltip del contenuto del tag Title, mostrato di default dai browser, è esteticamente poco valido, e può essere anche poco in linea con i colori del sito. Vediamo come migliorarne l'aspetto e come mostrare al passaggio del cursore un tooltip completamente personalizzato nella posizione, nel colore, nella trasparenza, nella famiglia di font, nello sfondo e in altri parametri.





Potremo usare questa tecnica per aggiungere un tooltip personalizzato a una sola immagine, oppure caricarlo nel Tema come regola CSS e personalizzare i tooltip delle foto semplicemente riprendendo il nome della classe CSS.

COME MOSTRARE UN TOOLTIP DESCRITTIVO SU UNA FOTO


Si apre l'Editor del nostro CMS, che può essere Blogger ma anche Wordpress, e si incolla questo codice:



dove, al posto dell' URL colorato di rosso, si inserisce l'indirizzo della nostra immagine. Opzionalmente si può aggiungere un collegamento al posto del cancelletto # . Altrimenti il tag #"> e la sua chiusura vanno eliminati. Quando ci si passerà sopra con il cursore si visualizzerà un tooltip personalizzato.

tooltip-personalizzato-immagini

Accanto a ogni attributo ho aggiunto dei commenti che ne illustrano il significato. Sono colorati di verde e possono essere tolti dopo che se ne è appreso il funzionamento. Si possono impostare dimensioni della immagine e del tooltip, dimensione e famiglia di font e aggiungere una cornice e un bordo colorati.






Particolarmente importante è il livello di trasparenza del testo e dello sfondo (nero nel codice proposto) per continuare a visualizzare anche la foto sottostante oltre al testo del tooltip. Nel codice è stato proposta una opacità del 40% ovvero 0.4. Si può aumentare l'opacità p.e. con 0.5 per rendere il testo del tooltip più visibile.


Si può anche aggiungere il CSS nel modello per poi riprendere solo l'HTML nel post.

CODICE DEL TOOLTIP NEL TEMA DI BLOGGER


Gli utenti di Blogger possono inserire il CSS nel template, per facilitarsi il compito, nel caso in cui volessero mostrare molte immagini con questa personalizzazione.  Si va su Tema -> Modifica HTML e si cerca la riga ]]>, quindi, subito sopra si incolla il codice compreso tra le due righe evidenziate di giallo escluse.





Per ottenere questo effetto quindi, quando si posta una foto, dovremo usare un codice con questa sintassi


dove al posto dei due cancelletti # si inseriscono rispettivamente l'indirizzo del collegamento e l'URL diretto della immagine. Se non si vogliono inserire link deve essere eliminato il tag e la sua chiusura .
reactions

Commenti

table of contents title