Come mostrare un tooltip sulle immagini al passaggio del mouse.

Come mostrare un tooltip sopra le immagini al passaggio del mouse per inserirne la descrizione o le informazioni relative.

Tra le funzionalità di Blogger esiste quella di inserire una descrizione della immagine che si è postata tramite Editor. Dopo che si è aggiunta l'immagine basta selezionarla e scegliere Aggiungi didascalia. Si dovrà digitare un testo che sarà visualizzato centralmente al di sotto della stessa immagine. Si possono aggiungere descrizioni anche piuttosto lunghe il cui testo sarà centrato sotto la foto.

In questo articolo vediamo una possibile alternativa o se si vuole una integrazione di questa funzionalità. L'obiettivo è quello di mostrare un tooltip con le informazioni sulla immagine quando ci si passi sopra con il cursore. Si possono settare una gran quantità di parametri e questo metodo può essere usato per una singola immagine oppure si può inserire il codice nel modello e richiamare l'effetto tramite l'identificativo dei fogli di stile che si sono dichiarati. Ecco un esempio di come si visualizza una tale foto

Se ci passate sopra con il mouse visualizzerete il tooltip con le informazioni sulla foto. Per inserire una foto come questa in un post si deve aprire l'Editor di Blogger e incollare in Modalità HTML questo codice

<style type="text/css">
.contenitore {
position: relative;
margin: 8px auto;
}
.contenitore img {
width:500px; /* Larghezza immagine */
border:1px solid #000; /* Bordo immagine */
background-color:#fff; /* Colore sfondo immagine */
padding:2px; /* Spessore sfondo immagine */
}
.tooltip { /* Stile del testo*/
position: absolute;
width:400px; /* Larghezza tooltip */
top: 4%;
left: 4%; /* Posizionamento tooltip*/
filter: alpha(opacity=0);
opacity: 0;
padding: 6px;
text-align:justify; /* Testo giustificato */
color: #fff; /* Colore testo tooltip */
background: #5b1308; /* Sfondo tooltip */
-moz-transition:all ease .6s; /* Durata Transizione*/
-webkit-transition:all ease .6s ;
transition:all ease .6s;
}
.contenitore:hover .tooltip {
filter: alpha(opacity=70);
opacity: .7; /* Trasparenza al passaggio del mouse */}
</style>
<div class="contenitore"><a href="URL_COLLEGAMENTO"><img src="URL_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 debbono essere modificati a secondo delle esigenze. I meno esperti possono leggere i post sui codici dei colori  sullo stile dei bordi. Ricordo che padding indica le distanze interne a un elemento mentre margin quelle esterne.

Nel caso si volesse utilizzare questo modo di pubblicare le immagini come standard abituale o quasi conviene incollare i fogli di stile nel template. Si va su Modello > Modifica HTML e si cerca la riga ]]></b:skin> quindi, subito sopra, si incolla questo codice

.contenitore {
position: relative;
margin: 8px auto;
}
.contenitore img {
width:500px; /* Larghezza immagine */
border:1px solid #000; /* Bordo immagine */
background-color:#fff; /* Colore sfondo immagine */
padding:2px; /* Spessore sfondo immagine */}
.tooltip { /* Stile del testo*/
position: absolute;
width:400px; /* Larghezza tooltip */
top: 4%;
left: 4%; /* Posizionamento tooltip*/
filter: alpha(opacity=0);
opacity: 0;
padding: 6px;
text-align:justify; /* Testo giustificato */
color: #fff; /* Colore testo tooltip */
background: #5b1308; /* Sfondo tooltip */
-moz-transition:all ease .6s; /* Durata Transizione*/
-webkit-transition:all ease .6s ;
transition:all ease .6s;
}
.contenitore:hover .tooltip {
filter: alpha(opacity=70);
opacity: .7; /* Trasparenza al passaggio del mouse */
}

Si salva il template. Quando si vuol pubblicare una immagine con il tooltip dobbiamo farlo caricandola su Picasa e acquisendone il link diretto che poi dovrà essere sostituito in questo codice

<div class="contenitore"><a href="URL_COLLEGAMENTO"><img src="URL_IMMAGINE" /><span class="tooltip">TESTO DEL TOOLTIP.</span></a></div>

insieme a tutti gli altri parametri e incollato nell'Editor di Blogger in Modalità HTML. Nell'Editor non si vedrà l'anteprima in modo corretto visto quindi per controllare l'aspetto della foto si dovrà procedere alla pubblicazione dell'articolo che la contiene. Ecco la solita Demo realizzata con il secondo procedimento