JavaScript - Como superponer capas y hacer evento click de área en web

Hola chic@s

Me estoy reciclando después de dejar de programar hace años, así que os pediría un poco de comprensión y paciencia. Aunque estoy indagando con el React Js para salir del paso de momento necesito poder intentar solucionar mi problema con Javascript. Os explico:

Tengo un Mapa Mundi en el cual necesito superponer 6 capas con los continentes delimitados por un contorno coloreado, el cual, cuando haces un "onmouseover" se muestre el continente coloreado por ese entorno, y cuando hagas un "onmouseout" desparezca. Después al hacer click tendría que abrirse una página con el continente ampliado (pero sobre el evento click en área, ya miraré como solucionarlo). Por el momento, donde tengo problemas es en superponer las capas, ya que me la coloca por debajo de mi div principal donde esta el Mapa Mundi, y me gustaría que la pusiera por encima. Lo probe con CSS en mi hoja de estilos con el z-index pero he desistido porque me desaparece el Mapa Mundi, así que quiero ver si lo puedo hacer con Javascript. El script que estoy utilizando es este:




Y el código Html es este:



Con este código me coloca la capa de Oceania por debajo del Mapa Mundi...y no se, estoy un poco bloqueado...aunque sigo haciendo probaturas y buscando como loco algún código que me pueda ayudar!!

Si me podeís echar una mano, tenéis una birra pagada (para cuando acabe esta jodida pandemia) ;-)

Un saludo

Al cambiar en la imagen principal "Mundi_Home_13.0.png" a position:absolute; se me superponen pero desfasadas y el menu inferior me lo tapa. Pero no lo entiendo, ya que las dos imágenes tienes las mismas dimensiones y no me las cuadra exactamente.

Hola Albert, la web esta publicada en Internet para poder verla y revisar el código?

Hola HDB, no no la tengo publicada. La estoy montando en un servidor de Coldfusion MX de pruebas aquí en casa. De todas maneras, me estoy dando cuenta que no podré hacer el sistema de capas, ya que aunque las imágenes son de las mismas dimensiones, al readaptarse en la pagina web, parece ser que no coge las mismas proporciones, ya que probando una imagen con position:absolute; y la otra con position:relative no casan. Pero, voy a optar por el sistema de mapa de imagen, con el tema de <area shape>

Muchisimas gracias

Saludos Albert,

algunas referencias:

http://www.netzgesta.de/mapper/

https://www.amcharts.com/demos/#maps

P.D.: si es algo sencillo lo que necesitas, puedes utilizar imágenes .png con transparencias.

Espero sea útil.

Ostras Gracias ScriptShow, estaba buscando algo así, ya que voy a buscar un sistema más de "mapeo". He podido hacer un <area shape> poligonal que me coge Oceania, pero necesito colorearlo en el momento de hacer un onmouseover y quitarle el borde que sale cuando haces click (Lo he hecho con el Dreamweaver).

Mirare estas webs a ver si encuentro la solución. Gracias!! ;-)

Muchisimas Gracias chicos, con http://www.netzgesta.de/mapper/

Me va de coña ... no puedo conseguir el efecto que quería inicialmente, pero espero que pueda valer. A ver que le parece a mi socio, jejeje.

Un saludo!!