Pubblicato il 14/04/16 - aggiornato il  | 4 commenti :

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 (#).


4 commenti :

  1. Buongiorno

    Il tooltip funziona bene. Io però avrei la necessità di metterne due nello head per avere effetti diversi su immagini diverse.
    Ho creato un altro style type denominandolo con altra parola diversa da .descrizione ma la larghezza del tooltip ed altri parametri si applicano a tutte le immagini come se le div class non esistessero.
    Qualche suggerimento? Grazie

    RispondiElimina
    Risposte
    1. Devi mettere anche un'altra classe per il tooltip. Esempio .descrizione2 .tooltip2 e aggiungere un nuovo blocco con i nuovi attributi e con le classi .descrizione2 .descrizione2 img .tooltip2 e .descrizione2:hover .tooltip2
      P.S. Le righe
      -moz-transition:all ease .5s; /* Durata Transizione*/
      -webkit-transition:all ease .5s ;
      con i nuovi browser si possono togliere
      @#

      Elimina
  2. Perfetto. Grazie. Ora è proprio come avrei voluto.
    Ho messo le due classi in un css esterno per semplificare.

    Piccola cosa : se il tooltip è abbastanza alto e va a coprire un'altra immagine sottostante, una parte del tooltip viene nascosta dalla suddetta immagine.
    Nel mio caso ho risolto cambiando il valore del top e mettendolo a -8 in modo da alzarlo e far si che non si sovrapponga all'altra immagine sottostante, esiste un altro sistema?

    Scusi del disturbo ed ancora grazie

    RispondiElimina
    Risposte
    1. In ogni caso si deve intervenire sui valori dei margini quindi un sistema vale l'altro 😊
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy