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

 
Vista:
Imágen de perfil de Albert
Val: 65
Ha aumentado su posición en 23 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

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

Publicado por Albert (20 intervenciones) el 05/11/2020 23:57:02
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:


codigo_javascript

Y el código Html es este:

codigo_html

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
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
Imágen de perfil de Albert
Val: 65
Ha aumentado su posición en 23 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

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

Publicado por Albert (20 intervenciones) el 06/11/2020 16:08:21
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.
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
Imágen de perfil de Joel
Val: 2.898
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

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

Publicado por Joel (667 intervenciones) el 06/11/2020 20:10:21
Hola Albert, la web esta publicada en Internet para poder verla y revisar el código?
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
Imágen de perfil de Albert
Val: 65
Ha aumentado su posición en 23 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

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

Publicado por Albert (20 intervenciones) el 06/11/2020 21:16:04
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
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
Imágen de perfil de ScriptShow
Val: 2.084
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

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

Publicado por ScriptShow (663 intervenciones) el 06/11/2020 20:40:30
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.
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
Imágen de perfil de Albert
Val: 65
Ha aumentado su posición en 23 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

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

Publicado por Albert (20 intervenciones) el 06/11/2020 21:19:54
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!! ;-)
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
Imágen de perfil de Albert
Val: 65
Ha aumentado su posición en 23 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

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

Publicado por Albert (20 intervenciones) el 07/11/2020 01:15:52
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!!
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