Rollover multiplo su mappe di immagine in DHTML
Grazie al DHTML possiamo gestire il famoso effetto rollover anche sulle mappe di immagine, attivando l'effetto al passaggio del mouse su una singola area di un'immagine unica.
Per l'esempio useremo un'immagine molto banale che chiameremo mappa.gif:
Passaggio sulla prima area di immagine (mappa_1.gif):
In un secondo momento puliremo ed implementeremo il codice assegnandogli, agli eventi onmouseover ed onmouseout, le funzioni Javascript che vedremo in seguito.
Segue il codice HTML:
<img border="0" src="mappa.gif" usemap="#mappa" name="immagine">
<map name="mappa">
<area shape="rect" coords="1, 2, 52, 48" href="1.html"
onmouseover="RollMapOn(1)" onmouseout="RollMapOff()">
<area shape="rect" coords="53, 2, 100, 49" href="2.html"
onmouseover="RollMapOn(2)" onmouseout="RollMapOff()">
<area shape="rect" coords="1, 50, 52, 96" href="3.html"
onmouseover="RollMapOn(3)" onmouseout="RollMapOff()">
<area shape="rect" coords="54, 49, 100, 96" href="4.html"
onmouseover="RollMapOn(4)" onmouseout="RollMapOff()">
</map>
Notate che la funzione che richiamiamo all'evento onmouseover ha un parametro rappresentato da un indice numerico crescente, mentre all'evento onmouseout non richiamiamo alcun parametro.
Segue adesso il codice Javascript delle funzioni richiamate nel codice HTML:
<script type="text/javascript">
function RollMapOn(i)
{
var IMG = document.getElementById("immagine");
IMG.src = "mappa_" + i + ".gif";
}
function RollMapOff()
{
var IMG = document.getElementById("immagine");
IMG.src = "mappa.gif";
}
</script>
Il funzionamento è davvero banale: al mouseover costruisco il nome dell'immagine sfruttando il parametro e ne assegno il valore alla proprietà sec dell'oggetto Image, richiamato intrinsecamente attraverso il DOM, mentre al mouseover ripristino, con lo stesso meccanismo, l'immagine originale.
Attenzione: dato che ogni volta che il rollover si verifica (la prima per ogni area della mappa) l'immagine va ricaricata, si consiglia di ottimizzarne le dimensioni in termini di peso, onde non rallentare eccessivamente il caricamento e la visualizzazione della pagina.
