onmouseover, immagini multiple su hotspot map

bragi

Nuovo Utente
5 Ago 2012
2
0
0
ciao a tutti (questo è il mio primo post)

rif: https://www.mrw.it/javascript/articoli/rollover-multiplo-mappe-immagine-dhtml_664.html

riguardo al tutorial di mrwebsite riportato qui sopra, sto provando a personalizzare questa funzione su di una mia pagina "index.html".
tale pagina si trova nella stessa directory della pagina "packA.html" e delle immagini "mrg.jpg", "mrg_1.jpg" ... "mrg_7.jpg".
a livello di mappatura del link la cosa funziona (cliccando nell'hotspot la pagina packA si apre), però, passando col mouse nel suddetto hotspot, non ho la sostituzione della immagine "mrg.jpg" con "mrg_1.jpg".
è molto probabile che mi sfugga qualcosa perchè sono veramente un principiante di javascript.

grazie in anticipo a tutti

Codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Titolo index</title>
<script type="text/javascript">
function RollMapOn(i)
{
    var IMG = document.getElementById("mrg");
    IMG.src = "mrg_" + i + ".jpg";
}
function RollMapOff()
{
    var IMG = document.getElementById("mrg");
    IMG.src = "mrg.jpg";
}
</script>
</head>
<body>

<img border="0" src="mrg.jpg" usemap="#map" name="mrg">
<map name="map">
     <area shape="poly" coords="153,152,116,105,95,45,158,16,217,12,253,24,253,60,236,107,218,138,194,134,170,141" href="packA.html"
        onmouseover="RollMapOn(1)" onmouseout="RollMapOff()">
</map>
</body>
 
Ciao, benvenuto
quello che noto subito è che non hai dato l'id al tag img
richiamandolo con il metodo document.getElementById("mrg");
lo script va in errore non trovando nessun elemento con tale id
prova
HTML:
<img border="0" src="mrg.jpg" usemap="#map" id="mrg" name="mrg" alt=""/>
 
infatti ora va... che occhio.
grazie mille per l'aiuto prezioso e per l'estrema rapidità.

ciao

ps: l'id va aggiunto anche al tutorial quindi? lo riporto qui sotto:

Codice:
<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>
 

Discussioni simili