Ciao a tutti,
ho trovato in rete una mappa delle regioni italiane che al passare del mouse mi visualizza accanto un'immagine con un testo, tutto in css.
di seguito un estratto del codice di stile.css
codice PHP:
#mappa a:hover span, #mappa {
display:block;
width:232px;
height:273px;
position:absolute;
right:10px;
top:10px;
border:2px solid #CCCCCC;
background-color:#FFFFFF;
padding:10px;
color:#333333;
font-size:12px;
line-height:18px;
letter-spacing:1px;
text-align:justify;
overflow:hidden;
z-index:20;
}
ed un estratto del codice html:
codice PHP:
<div id="mappa">
<a href="#">
<!-- immagine della regione. la classe si occupa di visualizzarla la posto giusto -->
<img src="img/r1.gif" id="r1" class="regione" alt="nome regione" />
<span>
<!--informazioni che appaiono quando onmouseover sulla regione -->
<img src="img/r1.jpg" alt="" />
<b>Regione 1</b>
<em>testo testo testo...</em>
</span>
</a>
...
<a href="#">
<img src="img/r2.gif" id="r2" class="regione" alt="nome regione" />
<span>
<img src="img/r2.jpg" alt="" />
<b>Regione 2</b>
<em>testo testo testo...</em>
</span>
</a>
</div>
e funziona.
Ovviamente quando cambio regione mi viene visualizzato il contenuto dello span quindi mi campia immagine e testo.
Quello che vorrei fare e di cliccare su una regione per "fissarla" (cioè disabilitare l'evento onmouseOver?) in modo da passare con il mouse sul testo contenuto enllo span,
questo perchè all'interno dello span vorrei visualizzare dei link ad altre pagine.
Si può fare?
allego un'immagine che dovrebbe chiarire cosa sto facendo.
Grazie a chi potrà aiutarmi