no se si lo tengo que hacer con java

gazaposa · #1 (**permalink**) 02/12/2009, 01:35

buenas, mi duda es la siguiente.
tengo un mapa y al lado un listado con las ciudades del mapa, y lo que quiero es que al ponerme encime de una ciudad, resalte esa misma ciudad de la lista, no se si me he explicado bien o no.
no se como lo puedo hacer. muchas gracias

hagoromo · #2 (**permalink**) 02/12/2009, 02:41

Pues estableces un enlace entre el id de cada región (<area>) del
mapa y el id de cada nombre de la ciudad. Al pasar encima de cada
área, con el evento 'onmouseover' buscas su correspondiente ciudad
y le cambias el atributo que quieras.

gazaposa · #3 (**permalink**) 02/12/2009, 02:55

y como establezco ese enlace?

hagoromo · #4 (**permalink**) 02/12/2009, 03:29

Pues por ejemplo con el id, al área de barcelona le das el id = "barcelona"
y a la ciudad de la lista le das el id = "barcelona_city"

Cuando lanzas el evento onmouseover del área, éste debe llamar
a una función en js tal y como:

Código:

function resalta(ciudad) {
    ciudad = document.getElementById(ciudad+"_city");
    if (ciudad) { ciudad.style.color = "#FF0000"; }
}

Saludos

gazaposa · #5 (**permalink**) 02/12/2009, 04:15

no me sale, mira:

<script language="JavaScript" type="text/JavaScript">
function resalta(ciudad) {
ciudad = document.getElementById(ciudad+"_lista");
if (ciudad) { ciudad.style.color = "#FF0000"; }
}
</script>
</head>

<body background="../../imagenes/FondoderechaMuseos.png">
<div id="Layer1" style="position:absolute; left:100px; top:51px; width:418px; height:520px; z-index:1" align="center"><img src="http://www.forosdelweb.com/imagenes/mapas/MapaMuseosgral.jpg" width="418" height="520" border="0" usemap="#Map">
<map name="Map">
<area shape="rect" id="castejon" coords="220,66,327,82" href="navarra/castejon.htm" target="mainFrame">
<area shape="rect" id="leukade" coords="32,108,180,122" href="larioja/aquilar.htm" target="mainFrame">
<area shape="rect" id="numancia" coords="13,133,123,146" href="castillaleon/garray.htm" target="mainFrame" onMouseOver="resalta(numancia)">
</map>
</div>
<div id="castejon_lista" style="position:absolute; left:566px; top:61px; width:110px; height:28px; z-index:2"><font color="#FFCC66">Castejón</font></div>
<div id="leukade_lista" style="position:absolute; left:569px; top:105px; width:107px; height:25px; z-index:3"><font color="#FFCC66">Leukade</font></div>
<div id="numancia_lista" style="position:absolute; left:570px; top:141px; width:98px; height:31px; z-index:4"><font color="#FFCC66">Numancia</font></div>
</body>
</html>

hagoromo · #6 (**permalink**) 02/12/2009, 05:15

Tienes un error en

Código:

onMouseOver="resalta(numancia)"

el valor debería ir entrecomillado (simple, en el ejemplo):

Código:

onMouseOver="resalta('numancia')"

Saludos

gazaposa · #7 (**permalink**) 02/12/2009, 05:51

eso ya lo he probado y no me funcionaba, gracias

gazaposa · #8 (**permalink**) 02/12/2009, 06:04

ya lo tengo muchas gracias por todo