Pubblicato il 14/04/16e aggiornato il

Come mostrare una descrizione sopra una immagine al passaggio del mouse.

Come mostrare una descrizione in stile tooltip sopra una immagine al passaggio del mouse usando HTML e CSS.
Nel codice HTML per pubblicare una immagine oltre al tag src che serve per inserirvi l'indirizzo dell'hotlink della stessa immagine ci possono essere anche i tag width, height, title e Alt. I tag width e height servono ovviamente per settare le dimensioni delle immagini. Se non fossero presenti la foto verrebbe mostrata con le sue dimensioni originali.

Il tag alt è quello più importante in ottica SEO e serve per il cosiddetto Testo Alternativo. Come valore di questo tag si mette tra virgolette il testo che si visualizzerà qualora il browser non riesca a caricare l'immagine per qualche ragione. Il tag title è invece sempre una descrizione della foto ma si visualizza come tooltip quando si passa con il cursore sopra all'immagine. Spesso i tag alt e title hanno lo stesso testo specie se si creano i post con Open Live Writer.

Tale tooltip è estremamente minimalista e non serve molto se si vuole inserire una descrizione lunga magari con colore del testo, famiglia di caratteri, dimensioni dei font, sfondo del tooltip e posizionamento personalizzati. In questo post mostrerò come creare una descrizione che si mostra sopra all'immagine al passaggio del cursore che abbia questo aspetto 
tooltip-immagine-descrizione
Si apre l'Editor del post o della pagina statica e si incolla un codice con questa struttura

<style type="text/css">
.descrizione {
position: relative;
margin: 10px auto;
}
.descrizione 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: brown; /* Sfondo tooltip */
-moz-transition:all ease .5s; /* Durata Transizione*/
-webkit-transition:all ease .5s ;
transition:all ease .5s;
}
.descrizione:hover .tooltip {
filter: alpha(opacity=70);
opacity: .7; /* Trasparenza al passaggio del mouse */
}
</style>
<div class="descrizione"><a href="#"><img src="URL_IMMAGINE" alt="nome-immagine" /><span class="tooltip">TESTO DEL TOOLTIP </span></a></div>

dove i commenti colorati di verde del tipo /* Commento */ servono per illustrare il significato dei vari parametri e possono anche essere tralasciati. I parametri colorati di rosso possono invece essere modificati a secondo delle esigenze. Chi non conosca le basi dell'HTML può consultare i post sui codici dei colori e sullo stile del bordo e scaricare l'ebook Guida all'HTML e al CSS.





Se si decide di mostrare il tooltip in molte immagini allora è meglio inserire i CSS nel modello. Si va su Modello > Modifica HTML e si cerca la riga ]]></b:skin> quindi, subito sopra, si incolla

.descrizione {
position: relative;
margin: 10px auto;
}
.descrizione 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: brown; /* Sfondo tooltip */
-moz-transition:all ease .5s; /* Durata Transizione*/
-webkit-transition:all ease .5s ;
transition:all ease .5s;
}
.descrizione:hover .tooltip {
filter: alpha(opacity=70);
opacity: .7; /* Trasparenza al passaggio del mouse */
}

per poi salvare il modello. Quando si posta una foto in un post con questo effetto dovremo andare in Modalità HTML e usare un codice così strutturato

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

I tag evidenziati di giallo servono se si vuole aggiungere un collegamento per aprire una pagina web con il click sulla foto. L'URL del collegamento si inserisce al posto del cancelletto (#).




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.