Problema con mapa de imagenes

Hakueiryu · #1 (**permalink**) 04/03/2015, 10:36

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>

caricatos · #2 (**permalink**) 04/03/2015, 10:43

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

Hakueiryu · #3 (**permalink**) 04/03/2015, 10:49

Hola, como utilizaria una imagen svg? no tengo experiencia con ese formarto y que tipo de estilos tendria que tener en cuenta?

caricatos · #4 (**permalink**) 04/03/2015, 11:05

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