CSS
Inserire in una frase o un immagine un commento che appare al passaggio del mouse
A volte visitando dei siti, ne troviamo alcuni che hanno delle frasi o immagini "commentate". Passandoci sopra con il mouse vediamo che appare una specie di finestrella nella quale è presente una descrizione dell'immagine oppure l'immagine stessa ingrandita o pubblicità relativa. Ho pensato di scrivere un codice che simuli questa finestrella.
Copiate questo codice nella parte antecedente alla frase o immagine da "commentare":
CODICE
<style>
<!--
.commentato{
position:relative;
color: black;
text-decoration: none;
}
.commentato div{
position:absolute;
visibility:hidden;
background-color:#c8ffb4;
border: dotted #c8ffb4 1px;
color:black;
text-decoration: none;
padding:3px;
top:20;
left:40;
}
.commentato:hover div{
visibility: visible;
index-z:100;
}
//-->
</style>
<!--
.commentato{
position:relative;
color: black;
text-decoration: none;
}
.commentato div{
position:absolute;
visibility:hidden;
background-color:#c8ffb4;
border: dotted #c8ffb4 1px;
color:black;
text-decoration: none;
padding:3px;
top:20;
left:40;
}
.commentato:hover div{
visibility: visible;
index-z:100;
}
//-->
</style>
Il funzionamento del codice è il seguente:
HTML
<a href="#" class="commentato">Testo o immagine passandoci sopra il quale il mouse, farà visualizzare il commento<div>il commento stesso</div></a>
in altre parole dovete creare un collegamento qualsiasi (al posto di # potete mettere anche un vostro link)
HTML
<a href="#"
HTML
<a href="#" class="commentato"></a>
con al suo interno la frase o immagine da commentare
HTML
<a href="#" class="commentato">Testo o immagine passandoci sopra il quale il mouse, farà visualizzare il commento</a>
dopo la frase fate uno spazio e inserite il tag <div>
HTML
<a href="#" class="commentato">Testo o immagine passandoci sopra il quale il mouse, farà visualizzare il commento<div></div></a>
all'interno del tag div inserite il commento stesso (il quale puo anche essere un immagine)
HTML
<a href="#" class="commentato">Testo o immagine passandoci sopra il quale il mouse, farà visualizzare il commento<div>il commento stesso</div></a>
N.B: Lo script è stato modificato in modo da rendere nero il colore del testo utilizzato come commento e di tutto ciò che è compreso nel tag <a>.
Provate a visualizzare questo commento
:HTML
<a href="#" class="commentato">Passaci sopra il mouse!<div><img src="http://img.forumfree.net/html/emoticons/wink.gif"></div></a>
Edited by Red eYe - 19/1/2010, 12:56
.
