onmouseover, immagini multiple su hotspot map

B

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>
 
criric

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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=""/>
 
B

bragi

Nuovo Utente
5 Ago 2012
2
0
0
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>
 
Devi accedere o registrarti per poter rispondere.
Discussioni simili
Autore Titolo Forum Risposte Data
I onMouseOver su immagini Javascript 23
T [PHP] [HTML] Action direttamente associate a onmouseover PHP 11
L onmouseover su div parenti indesiderato HTML e CSS 3
F onmouseover Javascript 3
K onMouseOver su immagine Javascript 2
P onmouseover e onmouseout su hotspot Javascript 15
G Onmouseout e onmouseover funziona solo lato backend Joomla 0
K onmouseover anteprima immagine come in google Javascript 2
LolliPoppingu Problema "onmouseover". HTML e CSS 24
H Funzione onmouseover per mostrare un box con un link da cliccare? Javascript 3
S Codice OnMouseOver Javascript 6
I onclick non cambia l'immagine invece onmouseOver e Out si Javascript 9
K Script - onmouseover compaiono immagine e testo Javascript 15
elilabruja onmouseover in php PHP 9
E [JAVA] modificare Script per evento onmouseover Javascript 0
T Aiuto effetto onmouseover immagine si allunga e compare testo Javascript 0
K testo ed img alternati con onmouseover Javascript 5
K onmouseover HTML e CSS 8
J OnMouseover Slideshow Javascript 0
T Onmouseover slideshow Javascript 3
K onmouseover in altro frame Javascript 2
D Problema onmouseover Javascript 0
Z png: OnMouseOver e UseMap Javascript 5
A onMouseOver Javascript 6
S Usare onmouseover con 'campo immagine' e non al tag <img> Javascript 3
D evento onmouseover Javascript 9
sbobby OnMouseOver HTML e CSS 3
H problemi con onmouseover e GetElementById Javascript 1
M OnMouseOver non funziona Javascript 1
purno Cambio immagine con onMouseOver: HTML e CSS 7
§ onmouseover finestrella Javascript 2
C Marquee verticale che si ferma onmouseover HTML e CSS 8
W OnMouseOver su una map area HTML e CSS 5
S [VB.NET]: Coordinate immagini dentro una PictureBox Visual Basic 0
G Perché il mio sito su Google news fa vedere le immagini degli articoli la mia foto profilo? WordPress 1
M Immagini non usate WordPress 0
elmonarca77 Utilizzo e licenze immagini Webdesign e Grafica 4
S Risoluzione Immagini e Connessione Joomla 0
G Il mio sito dopo aver abilitato l'ssl non visualizza le immagini con indirizzi senza ssl HTML e CSS 0
A WordPress e immagini Hosting 0
Y RITAGLIO IMMAGINI Javascript 0
R Immagini html HTML e CSS 2
E Come gestire al meglio le immagini legno grande formato Photoshop 0
M Random Immagini + Testi PHP 13
L form immagini per il database PHP 0
Ricky80 Coordinazione immagini HTML e CSS 4
P Percorsi e immagini. PHP 0
N Indicizzazione immagini su Google Google Search Console 0
L Import Immagini piattaforma IONIC Sviluppo app per Android 0
L Import massivo di immagini in tabelle piattaforma IONIC Presentati al Forum 1

Discussioni simili

Alto Basso