JavaScript - Como hacer....

 
Vista:

Como hacer....

Publicado por amalgama (3 intervenciones) el 11/07/2002 00:21:45
Hola buenas. A ver si me explico que es un poco complicado. En la pagina de la Sierra de Madrid quiero poner un mapa de la sierra de Madrid y que pasando el raton sobre unos ciertos sectores de la imagen, en la misma pagina he creado un campo de texto tipo formulario el que quiero que aparezca la informacion del pueblo sobre el q pase el raton,se que se crea en javascript pero no se como dividir el mapa en sectores ya q en un mapa de bits se ligan a distintas paginas,pero aqui creo que va por coordenadas, me podrias decir como hacerlo.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

RE:Como hacer....

Publicado por Kesar (198 intervenciones) el 11/07/2002 09:29:56
Hola amalgama, para dividir la foto en varias tienes que crear un mapa <map>, con distintas a areas <area>, que las defines por coordenadas en la imagen. Esto lo puedes hacer editando la imagen con un editor o simplemente si usas un programa para crear paginas web este deberia hacertelo.
Luego para cambiar el texto del campo, haces un onmouseover en cada area y le das la intruccion: onmouseover="campo.innertext='la descripcion del pueblo'"

Ejemplo, copialo y pegalo en un htm para ver como funciona:
<html>
<head>
</head>
<body>

<map name="nombre_mapa">
<area shape="poly" coords="14,11,143,11,142,53,21,55,22,30,10,12,11,10" href="pagina.htm" title="nombre_pueblo" onmouseover="campo.innerText='Descripcion del primer pueblo'">
<area shape="poly" coords="13,76,87,79,143,54,197,53,203,39,248,41,244,99,12,102" href="pagina.htm" title="nombre_pueblo2" onmouseover="campo.innerText='Descripcion del segundo pueblo'">
<area shape="poly" coords="148,12,145,11,252,9,249,36,197,38,193,49,146,51" href="pagina.htm" title="nombre_pueblo3" onmouseover="campo.innerText='Descripcion del tercer pueblo'">
</map>
<img src="images/Noticias.gif" border="0" width="259" height="114" alt="" usemap="#nombre_mapa">
<input type="text" name="campo" size="40" maxlength="256">

</body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar