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