Foros del Web » Creando para Internet » HTML »

Problema con mapa de imagenes

Estas en el tema de Problema con mapa de imagenes en el foro de HTML en Foros del Web. Hola que tal, tengo un pequeño problema con un mapa de imagenes, ya he leido varios de los post en donde caricatos ayuda con su ...
  #1 (permalink)  
Antiguo 04/03/2015, 10:36
Avatar de Hakueiryu  
Fecha de Ingreso: febrero-2015
Mensajes: 33
Antigüedad: 9 años, 3 meses
Puntos: 0
Pregunta Problema con mapa de imagenes

Hola que tal, tengo un pequeño problema con un mapa de imagenes, ya he leido varios de los post en donde caricatos ayuda con su metodo, pero ese no me ha servido, lo que busco es lograr ese mismo efecto en este mapa http://pruebamapas.esy.es/mapa.html pasar el mouse por cualquiera de las areas y que se ilumine o que se superponga una imagen con un color gris para que se diferencie.

He leido que se puede trabajar con javascript usando las funciones onMouseOn y onMouseOut, pero la verdad es que no se como defirlas me pueden ayudar con esto por favor

Lo estoy trabajando de esta forma:
Código HTML:
<center><img src="mapa4.PNG" width="500px" height="500px" usemap="#Map" alt="texto alternativo  "></center>
<map name="Map">
  <area shape="poly" coords="160,68,151,73,143,70,137,73,130,73,125,75,121,80,118,85,112,90,112,95,114,97,114,103,113,107,111,110,108,112,103,115,99,115,96,119,96,123,96,129,93,132,94,136,97,139,100,143,103,147,105,150,109,153,111,155,114,158,117,161,119,164,122,168,122,173,124,179,126,182,126,187,128,189,129,192,132,194,135,198,142,199,150,199,153,196,158,196,163,190,168,185,173,180,175,173,172,166,169,159,171,159,176,158,177,155,178,151,179,145,173,137,171,134,172,130,172,125,172,122,170,119,162,113,165,106,165,95,159,87,158,78,156,75" href="http://www.forosdelweb.com/f4/listado_proyecto_inversion/listado_garcia_hevia_9.php">
  <area shape="poly" coords="228,33,224,34,219,38,214,41,211,42,209,45,208,51,200,51,196,51,192,55,185,58,179,60,170,63,165,67,164,72,164,78,165,83,165,88,168,94,170,95,170,100,171,103,171,108,171,113,172,114,174,115,178,119,178,126,178,130,180,133,182,135,184,142,185,147,185,153,189,153,197,148,198,145,207,143,211,142,214,144,217,145,217,138,220,134,226,130,232,127,236,123,239,120,241,116,241,109,237,100,237,93,238,85,232,78,227,68,227,62,230,55,230,47,228,40,228,36" href="http://www.forosdelweb.com/f4/listado_proyecto_inversion/listado_panamericano_19.php">
  <area shape="poly" coords="238,46,240,53,241,57,241,62,239,64,239,69,241,74,243,79,247,81,248,87,246,94,246,99,248,103,253,108,253,112,253,117,252,122,254,126,257,128,261,132,265,135,267,129,270,125,276,125,278,125,282,125,286,126,285,121,283,115,286,110,291,104,296,100,298,93,297,86,293,78,289,69,284,63,276,55,269,53,264,51,259,48,253,49,243,49" href="http://www.forosdelweb.com/f4/listado_proyecto_inversion/listado_samuel_dario_22.php">
  <area shape="poly" coords="100,155,106,160,111,163,113,166,114,174,116,178,118,185,120,189,121,194,123,200,130,203,135,205,140,207,146,208,151,209,153,213,155,218,156,223,159,228,165,231,166,238,163,245,161,251,153,256,144,255,137,250,129,258,126,253,119,254,111,250,111,240,111,231,106,225,106,219,106,207,109,209,109,201,109,194,103,185,98,176,100,167" href="http://www.forosdelweb.com/f4/listado_proyecto_inversion/listado_ayacucho_3.php">
  <area shape="poly" coords="166,218,161,212,159,206,160,200,165,196,170,193,174,189,178,184,183,180,187,180,189,185,185,187,182,193,178,198,177,203,174,209,171,213" href="http://www.forosdelweb.com/f4/listado_proyecto_inversion/listado_antonio_romulo_2.php">
  <area shape="poly" coords="182,172,178,165,184,159,190,162,197,156,208,149,205,150,212,152,219,153,223,158,225,153,226,146,229,150,231,158,233,163,238,165,241,172,239,177,237,181,235,183,230,187,224,188,214,193,204,189,201,186,196,180,195,175,191,170,187,170" href="http://www.forosdelweb.com/f4/listado_proyecto_inversion/listado_san_judas_24.php">
  <area shape="poly" coords="227,141,231,136,236,132,242,131,248,136,251,136,257,139,260,144,261,150,263,155,264,162,268,167,262,171,261,177,255,182,255,188,253,195,253,202,255,206,255,212,253,219,252,226,250,231,247,238,247,244,240,244,234,247,231,250,225,248,218,246,221,236,220,229,220,223,217,219,216,214,220,210,219,203,218,194,222,195,228,192,236,190,241,185,245,179,246,173,247,166,245,160,241,157,236,154,233,145" href="http://www.forosdelweb.com/f4/listado_proyecto_inversion/listado_jauregui_12.php">
  <area shape="poly" coords="195,192,188,194,189,200,188,204,187,207,182,211,180,217,174,222,173,226,178,226,183,227,188,224,194,224,198,230,205,223,205,218,212,215,213,200,206,199,199,195" href="http://www.forosdelweb.com/f4/listado_proyecto_inversion/listado_seboruco_25.php">
  <area shape="poly" coords="184,236,189,233,197,233,201,236,205,235,206,229,211,225,216,227,218,234,218,240,216,245,215,249,213,255,210,263,205,267,203,274,195,279,184,279,181,274,184,269,179,263,182,263,184,253,185,245,184,238" href="http://www.forosdelweb.com/f4/listado_proyecto_inversion/listado_jose_maria_13.php">
  <area shape="poly" coords="173,238,180,240,180,246,178,253,174,257,172,264,173,270,171,273,173,275,158,275,152,274,144,272,139,267,136,259,142,261,149,261,156,263,160,259,164,256,168,250,170,244" href="http://www.forosdelweb.com/f4/listado_proyecto_inversion/listado_michelena_18.php">
  <area shape="poly" coords="109,257,118,258,121,260,122,267,128,269,134,270,134,274,138,281,145,285,153,283,160,283,164,283,160,290,154,295,145,296,135,295,127,298,120,295,115,290,108,286,105,279,105,271,109,266" href="http://www.forosdelweb.com/f4/listado_proyecto_inversion/listado_lobatera_17.php">
  <area shape="poly" coords="89,252,94,251,98,253,102,259,99,265,96,271,93,279,99,286,93,288,90,298,85,297,77,298,75,290,76,283,71,281,66,277,71,273,80,272,83,267,88,263,90,258" href="http://www.forosdelweb.com/f4/listado_proyecto_inversion/listado_pedro_maria_20.php">
  <area shape="poly" coords="274,132,280,132,284,133,285,136,286,141,289,146,285,149,280,153,277,151,276,154,274,162,271,159,269,152,269,145,269,142,272,138" href="http://www.forosdelweb.com/f4/listado_proyecto_inversion/listado_simon_rodriguez_26.php">
  <area shape="poly" coords="116,301,109,295,101,296,94,298,95,305,96,313,99,316,103,319,106,319,107,322,109,326,110,331,109,336,113,337,115,344,117,344,121,348,125,353,130,360,132,356,131,350,129,345,128,338,122,331,121,327,120,322,117,315,116,306" href="http://www.forosdelweb.com/f4/listado_proyecto_inversion/listado_libertad_15.php">
  <area shape="poly" coords="135,319,140,324,144,327,146,322,139,319" href="http://www.forosdelweb.com/f4/listado_proyecto_inversion/listado_cardenas_5.php">
</map> 
  #2 (permalink)  
Antiguo 04/03/2015, 10:43
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 2 meses
Puntos: 1284
Respuesta: Problema con mapa de imagenes

Hola:

Me agrada saber que has leído mensajes míos, y ya que necesitas usar mapas, tal vez te interese usar imágenes svg. Teniendo las areas, puedes obtener directamente los polígonos, y puedes usar imágenes normales de fondo... los rollover se consiguen con estilos (simplemente)...

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 04/03/2015, 10:49
Avatar de Hakueiryu  
Fecha de Ingreso: febrero-2015
Mensajes: 33
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: Problema con mapa de imagenes

Hola, como utilizaria una imagen svg? no tengo experiencia con ese formarto y que tipo de estilos tendria que tener en cuenta?
  #4 (permalink)  
Antiguo 04/03/2015, 11:05
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 2 meses
Puntos: 1284
Respuesta: Problema con mapa de imagenes

Hola:

El mapa que he usado con ficheros de imagen normales, se puede ver aquí: SVG: Mapa de España...

Hay pocas líneas de código, pero creo que son significativas.

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

Etiquetas: php, requerimiento
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 16:35.