Pubblicato il 04/08/14e aggiornato il

Come mostrare un tooltip con descrizione sopra le immagini al passaggio del mouse.

Come visualizzare un tooltip colorato con font e colori personalizzati al passaggio del cursore sopra le immagini.
Quando si passa con il cursore sopra una immagine ci viene mostrato il testo contenuto all'interno del tag Title che insieme all'altro tag Alt serve per rendere l'immagine più descrittiva aggiungendo un testo pertinente a beneficio dei lettori e dei motori di ricerca.

Il tooltip visualizzato in questo modo è esteticamente poco valido e non si presta a mostrare delle descrizioni troppo lunghe. Vediamo come risolvere il problema 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.

MOSTRARE UN TOOLTIP DESCRITTIVO SOPRA A UNA IMMAGINE


Per introdurre questa funzionalità a una singola immagine dobbiamo aprire l'Editor del post o della pagina statica e incollare questo codice

<style type="text/css">
.imm-tooltip {
position: relative;
margin: 10px auto;
}
.imm-tooltip img {
width:400px; /* Larghezza immagine */
border:1px dashed #036; /* Bordo immagine */
background-color:lightyellow; /* Colore sfondo immagine */
padding:5px; /* Spessore sfondo immagine */
}
.tooltip { /* Stile del testo*/
position: absolute;
width:320px; /* Larghezza tooltip */
font-size:15px; /* Dimensione font */
font-family: Georgia; /* Famiglia dei caratteri */
top: 5%;
left: 2%; /* Posizionamento inizio del tooltip*/
filter: alpha(opacity=0);
opacity: 0;
padding: 6px;
text-align:justify; /* Testo giustificato */
color: #fff; /* Colore testo tooltip */
background: black; /* Sfondo tooltip */
-moz-transition:all ease .5s; /* Durata Transizione*/
-webkit-transition:all ease .5s ;
transition:all ease .5s;
}
.imm-tooltip:hover .tooltip {
filter: alpha(opacity=70);
opacity: .7; /* Trasparenza al passaggio del mouse */
}
</style>
<div class="imm-tooltip"><a href="#"><img src="URL_IMMAGINE" alt="nome-immagine" /><span class="tooltip">TESTO DEL TOOLTIP </span></a></div>

Ho inserito dei commenti colorati di verde, che tra l'altro possono anche essere tolti, per illustrare il significato della maggior parte dei parametri. I meno esperti possono consultare i post sui codici dei colori e sullo stile dei bordi. Al passaggio del cursore lo sfondo del tooltip si mostrerà con una opacità del 70% per continuare a vedere parzialmente anche l'immagine sottostante.






MOSTRARE IL TOOLTIP IN MOLTE IMMAGINI


Se si decide di mostrare questo tipo tooltip in molte immagini allora è conveniente incollare il CSS nel template. Il codice in questione è quello compreso tra le due righe evidenziate di giallo escluse. Tale codice può essere inserito nel template in due modalità che sono equivalenti. Con la prima opzione si va su Modello > Personalizza > Avanzato > Aggiungi CSS e si incolla nel campo posto a destra quindi si pone il cursore dopo l'ultima parentesi graffa e si pigia su Invio (OS Windows). Successivamente si va in alto a destra su Applica al blog

Con la seconda opzione invece si va su Modello > Modifica HTML, si cerca la riga ]]></b:skin> e subito sopra si incolla lo stesso codice. Per terminare si deve salvare il template. In entrambi i casi per ottenere questo effetto quando si posta una foto dovremo usare questo codice

<div class="imm-tooltip"><a href="#"><img src="URL_IMMAGINE" alt="nome-immagine" /><span class="tooltip">TESTO DEL TOOLTIP </span></a></div>

Al posto del cancelletto ( # ) si può inserire un URL per linkare una pagina web.




Nessun commento :

Posta un commento

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.