Problema con Rollover

**esacerbare** · 21-11-2009, 19:24

Cosa c'é di sbagliato in questo codice? Vorrei ricreare un effetto rollover su un quadrato come fatto qui:
http://www.mrwebmaster.it/javascript...dhtml_664.html

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>Documento senza titolo</title>
</head>
<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>
<body>
[img]mappa.gif[/img]
<map name="mappa">
<area shape="rect" coords="1, 2, 52, 48" href="http://www.google.it"
onmouseover="RollMapOn(1)" onmouseout="RollMapOff()">
<area shape="rect" coords="53, 2, 100, 49" href="http://www.html.it"
onmouseover="RollMapOn(2)" onmouseout="RollMapOff()">
<area shape="rect" coords="1, 50, 52, 96" href="http://forum.punto-web.net/"
onmouseover="RollMapOn(3)" onmouseout="RollMapOff()">
<area shape="rect" coords="54, 49, 100, 96" href="http://www.google.it"
onmouseover="RollMapOn(4)" onmouseout="RollMapOff()">
</map>
</body>
</html>

Ho provato a smanettare un poco ma non riesco proprio... Non voglio usare altri sistemi ma usare questo schema e questi tag (area, map, onmouseover, onmouseout).

Se siete in grado grazie mille!

**esacerbare** · 21-11-2009, 19:34

Aggiornandolo un poco ottengo un file validato:

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>Documento senza titolo</title>
</head>
<body>
<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>
[img]mappa.gif[/img]
<map name="mappa" id="giotti">
<area shape="rect" coords="1, 2, 52, 48" href="http://www.google.it"
onmouseover="RollMapOn(1)" onmouseout="RollMapOff()" alt="immagine1"></area>
<area shape="rect" coords="53, 2, 100, 49" href="http://www.html.it"
onmouseover="RollMapOn(2)" onmouseout="RollMapOff()" alt="immagine1"></area>
<area shape="rect" coords="1, 50, 52, 96" href="http://forum.punto-web.net/"
onmouseover="RollMapOn(3)" onmouseout="RollMapOff()" alt="immagine1"></area>
<area shape="rect" coords="54, 49, 100, 96" href="http://www.google.it"
onmouseover="RollMapOn(4)" onmouseout="RollMapOff()" alt="immagine1"></area>
</map>
</body>
</html>

ma non funziona ancora...

**esacerbare** · 21-11-2009, 22:41

anche questo non funziona c@zzo...

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>Documento senza titolo</title>
</head>
<body>

[img]mappa.gif[/img]
<map name="mappa" id="immagine">
<area shape="rect" coords="0, 0, 50, 50" href="http://www.google.it"
onmouseover="document.images[1].src='mappa_1.gif'" onmouseout="document.images[1].src='mappa.gif'" alt="alt1"></area>
<area shape="rect" coords="50, 0, 100, 50" href="http://www.html.it"
onmouseover="document.images[1].src='mappa_2.gif'" onmouseout="document.images[1].src='mappa.gif'" alt="alt2"></area>
</map>


</body>
</html>

**esacerbare** · 22-11-2009, 18:52

up! up! up! up! up!

**fcaldera** · 23-11-2009, 22:28

Originariamente inviato da esacerbare
Aggiornandolo un poco ottengo un file validato:

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>Documento senza titolo</title>
</head>
<body>
<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>
[img]mappa.gif[/img]
<map name="mappa" id="giotti">
<area shape="rect" coords="1, 2, 52, 48" href="http://www.google.it"
onmouseover="RollMapOn(1)" onmouseout="RollMapOff()" alt="immagine1"></area>
<area shape="rect" coords="53, 2, 100, 49" href="http://www.html.it"
onmouseover="RollMapOn(2)" onmouseout="RollMapOff()" alt="immagine1"></area>
<area shape="rect" coords="1, 50, 52, 96" href="http://forum.punto-web.net/"
onmouseover="RollMapOn(3)" onmouseout="RollMapOff()" alt="immagine1"></area>
<area shape="rect" coords="54, 49, 100, 96" href="http://www.google.it"
onmouseover="RollMapOn(4)" onmouseout="RollMapOff()" alt="immagine1"></area>
</map>
</body>
</html>

ma non funziona ancora...

ok, ripartiamo da questo
fermo restando tu abbia anche le immagini dell'esempio originario
prova a guardare la riga

codice:

var IMG = document.getElementById("immagine")

esiste un elemento nella pagina che ha id="immagine"?

**esacerbare** · 23-11-2009, 22:39

verissimo!

infatti con questo va:

[img]mappa.gif[/img]

molte grazie!

Discussione: Problema con Rollover

Strumenti discussione

Ricerca discussione

Visualizza

Problema con Rollover

Permessi di invio