Foros del Web » Programando para Internet » Javascript »

mapa de imagenes con javascript

Estas en el tema de mapa de imagenes con javascript en el foro de Javascript en Foros del Web. hola amigos, me meti en u problemon y no se como salir. necesito hacer en html lo mismo que esta en el fash. un mapa ...
  #1 (permalink)  
Antiguo 10/10/2014, 09:27
 
Fecha de Ingreso: abril-2014
Mensajes: 19
Antigüedad: 10 años
Puntos: 0
mapa de imagenes con javascript

hola amigos, me meti en u problemon y no se como salir.
necesito hacer en html lo mismo que esta en el fash.
un mapa donde clickeando en una de los estados se muestre una informacion.
cree el mapa de imagenes y ahora creo que deberia ir javascript, la verdad no se, pero vi en un ejemplo que lo hacian con javascript, y no lo pude hacer.
este es el link del flash
www.grupohelvetia.tuars.com/map/deutschland_plz_2014.swf

debajo adjunto el mala de imagene que cree

Código HTML:
<body>
<img src="http://www.grupohelvetia.tuars.com/map/map.png" width="352" height="396" usemap="#Map" border="0" />
<map name="Map" id="Map">
  <area shape="poly" coords="122,5,144,10,147,11,152,6,165,13,163,17,167,19,164,26,171,26,169,35,176,28,188,34,197,30,199,39,191,46,193,51,202,49,212,53,214,48,225,50,228,62,213,70,230,83,208,89,228,92,220,99,205,99,189,109,179,108,173,102,166,105,159,119,148,111,157,96,158,90,154,86,163,81,163,73,151,70,145,57,132,55,130,41,129,34,123,36,123,29,133,27,132,21,122,5" class="flatshape" id="01" />
  
  <area shape="poly" coords="120,361,135,367,149,377,160,376,163,372,178,389,187,372,202,374,203,367,197,364,197,346,214,328,204,306,189,300,174,299,155,311,138,313,133,322,125,324,120,345,119,361" class="flatshape" id="02" />
  <area shape="poly" coords="117,362,108,371,88,372,82,363,86,338,107,301,66,292,44,273,62,267,86,253,101,265,132,278,150,263,165,271,177,297,157,308,136,311,130,318,122,328,117,346,117,362" class="flatshape" id="03"/>

  <area shape="poly" coords="204,379,219,378,245,368,264,365,278,375,281,363,267,343,288,330,292,317,301,319,303,304,286,294,271,290,254,296,244,311,240,303,219,298,206,304,219,327,199,347,200,362,206,368,204,379" class="flatshape" id="04"/>
  <area shape="poly" coords="241,236,255,253,250,260,261,273,278,288,267,288,255,292,245,304,236,299,223,296,209,300,203,303,181,297,169,275,157,261,170,252,163,245,159,236,166,227,185,230,187,222,214,225,223,231,233,230,242,235" class="flatshape" id="05" />
  <area shape="poly" coords="145,109,154,97,154,90,151,85,159,80,159,75,149,72,142,62,129,59,117,63,115,71,104,67,101,62,61,76,58,83,65,91,64,107,53,110,55,120,66,121,70,135,82,149,110,146,117,143,116,129,110,122,128,121,136,103,144,109" class="flatshape" id="06" />
  <area shape="poly" coords="217,42,230,39,258,25,276,38,286,49,299,58,306,78,303,93,300,102,314,112,316,121,308,126,292,122,263,121,246,113,234,111,231,121,224,115,216,118,203,117,198,107,206,101,219,102,232,92,220,89,236,86,221,71,229,65,229,52,223,46" class="flatshape" id="07" />
  <area shape="poly" coords="68,140,77,150,91,151,102,150,110,165,117,160,123,164,123,176,120,188,106,195,91,203,76,186,65,171,65,163,50,157,60,152,58,148,67,141" class="flatshape" id="08" />
  <area shape="poly" coords="36,155,62,164,64,174,73,185,73,202,44,224,31,207,35,200,31,195,42,179,35,155" class="flatshape" id="09" />
  <area shape="poly" coords="44,271,82,253,78,240,87,231,98,218,95,205,89,205,77,189,77,202,45,226,46,233,38,239,36,252,48,260" class="flatshape" id="10" />
  <area shape="poly" coords="81,242,84,250,93,256,114,268,131,275,150,262,166,251,158,241,157,232,164,226,167,220,164,209,169,198,168,189,160,182,152,183,155,173,149,169,141,180,129,175,124,188,98,203,102,218" class="flatshape" id="11" />
  <area shape="poly" coords="170,215,170,225,180,226,185,217,216,223,232,227,237,212,242,189,234,179,242,173,262,150,253,145,263,142,272,124,262,124,236,114,233,123,224,118,218,120,205,120,198,117,197,127,201,133,199,147,188,149,187,159,191,168,180,173,167,182,172,191,170,205" class="flatshape" id="12" />
  <area shape="poly" coords="236,229,247,238,254,229,270,225,311,200,310,191,319,193,324,201,331,200,335,180,332,169,318,152,321,144,315,127,309,129,300,126,288,125,274,124,266,143,262,154,239,179,244,186" class="flatshape" id="13" />
  <area shape="poly" coords="138,107,157,121,161,122,166,111,172,106,179,111,194,110,194,122,197,131,196,144,185,149,186,165,170,176,159,179,156,170,148,166,139,176,125,174,125,161,116,156,111,160,108,150,120,147,120,129,117,125,132,124" class="flatshape" id="14" />
</map>
<div>Aca se muestra la info de cada estado</div>
</body> 

Última edición por funnico; 10/10/2014 a las 09:34
  #2 (permalink)  
Antiguo 10/10/2014, 13:17
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 10 meses
Puntos: 1012
Respuesta: mapa de imagenes con javascript

lee estos dos artículos
http://www.pepemolina.com/index.php?...pa+de+Espa%F1a
http://www.pepemolina.com/index.php?...adas+relativas
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #3 (permalink)  
Antiguo 11/10/2014, 01:16
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Respuesta: mapa de imagenes con javascript

Hola:

En el mismo dominio de las referencias de IsaBelM, Hay más apuntes y pueden interesarte los que tratan del formato svg, que podría servirte y es relativamente fácil de aprender y de implementar.

Viendo tu código, parece que deberías empezar por obtener mejor las diferentes áreas. No sé que has usado, pero deberías probar la página del mismo dominio: Capturar áreas en imágenes... solo tienes que subir la imagen/mapa y pinchar sobre las áreas que quieras obtener... compara los resultados...

...

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo

Etiquetas: html, imagenes, mapa
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:41.