Vari tooltip in una pagina HTML

Allego l’ottimo lavoro di Luigi che ha trovato il modo di fare uscire in un’unica pagina HTML dei tooltip diversi al passaggio del mouse visualizzando delle immagini diverse per ogni punto voluto.  Le istruzioni sono:

<style>
.tooltip3:hover .contenitore {
display:block;
position: absolute;
top: 200px;
left: 200px;
}
.contenitore{display:none}
.tooltip3:hover{
}
.tooltip2:hover .contenitore {
display:block;
position: absolute;
top: 200px;
left: 700px;
}
.contenitore{display:none}
.tooltip2:hover {
}
.tooltip1:hover .contenitore {
display:block;
position: absolute;
top: 200px;
left: 150px;
}
.contenitore{display:none}
.tooltip1:hover {
}
</style>
<a href=”#”><img alt=”” height=”23″ src=”immagine base” width=”20″><span>
<img alt=”” height=”60″ src=”immagine 1″ width=”256″></span></a>
<a href=”#”><img alt=”” height=”23″ src=”immagine base” width=”20″><span>
<img alt=”” height=”101″ src=”immagine 2″ width=”56″></span></a>
<a href=”#”><img alt=”” height=”23″ src=”immagine base” width=”20″><span>
<img alt=”” height=”101″ src=”immagine 3″ width=”56″></span></a>

In allegato una pagina di esempio (2.html) e le relative istruzioni.tooltip

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Lascia un commento

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Utilizzo i cookie per essere sicuro che tu possa avere la migliore esperienza sul mio sito. Se continui ad utilizzare questo sito assumo che tu ne sia felice.. maggiori informazioni

Questo sito utilizza i cookie per fonire la migliore esperienza di navigazione possibile. Continuando a utilizzare questo sito senza modificare le impostazioni dei cookie o clicchi su "Accetta" permetti al loro utilizzo.

Chiudi