TransWikia.com

¿Cómo se pueden superponer elementos y que no se desplacen cuando cambia la resolución?

Stack Overflow en español Asked by Max Vázquez on August 26, 2021

Tengo un mapa de un país como fondo y quisiera poner por encima de él, íconos que destaquen puntos de interés y sus principales lugares y que al pasar el cursor sobre los íconos, el nombre el lugar y cuando le haga clic me enlace a otra página. Lo que no he podido hacer es que al cambiar la resolución para dispositivos más pequeños, los íconos se queden en el punto justo del mapa que les corresponde y al cambiar la resolución los íconos se descuadran, es decir no puedo hacer que mantengan la posición.

Este es un ejemplo que está hecho con un plugin de wordpress, pero se asemeja mucho a lo que estoy intentando hacer https://www.mountainbikeworldwide.com/#rev_slider_10_2_wrapper

Esta es mi estructura:

<section class="map">
    <div class="container-fluid">
        <div class="regiones">
            <a href="#regiones"><img src="/img/regiones.png" alt="" class="img-fluid"></a>
        </div>
        <div class="container-fluid">
            <a href="#ciudad-1" class="pointer-map ciudad-1">X</a>
            <a href="#ciudad-2" class="pointer-map ciudad-2">X</a>
            <a href="#ciudad-3" class="pointer-map ciudad-3">X</a>
            <a href="#ciudad-4" class="pointer-map ciudad-4">X</a>
            <a href="#ciudad-5" class="pointer-map ciudad-5">X</a>
            <a href="#ciudad-6" class="pointer-map ciudad-6">X</a>
        </div>
    </div>
</section>

Y el CSS

.map {
    position: relative;
    height: 600px;
    display: block;
}

.regiones {
    position: absolute;
    min-height: 600px;
    z-index: 9;
    width: 100%;
    text-align: center;
}

.pointer-map {
    position: absolute;
    z-index: 10;
    font-size: 30px;
    font-weight: 600;
    font-family: fantasy;
    color: #fff;
    display: block;
    text-shadow: 0 0 3px black;
}

.ciudad-1 {
    top: 70%;
    left: 63%;
}

y así con las demás ciudades.

csscss3htmlhtml5

One Answer

Me quede pensando en tu problema amigo. Y pienso que esta podria ser una solucion. Hazte una especie de malla flex que contenga cuadros basados en porcentajes por lo que se reajustan de tamano dinamicamente y reajusta el contenido del contenedor principal map con jquery de esta forma siempre que se ajuste la ventana, todo se reajustara dinamicamente a cualquier tamano de pantalla, ya sea movil, ipad lo que sea. Ejecuta el ejemplo que te pongo:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <!-- Jquery -->
   <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
   <script>
      var img = new Image();
      img.src = 'https://images-na.ssl-images-amazon.com/images/I/81r8Hxz5lQL._AC_SL1500_.jpg';
      img.onload = function() {
         var imageWidth = this.width;
         var imageHeight = this.height;
         var initial_width = $('#map').width();
         var initial_height = (initial_width * imageHeight)/imageWidth + "px";
         $('#map').css({
            'display':'flex',
            'flex-wrap': 'wrap',
            'background-image':'url("https://images-na.ssl-images-amazon.com/images/I/81r8Hxz5lQL._AC_SL1500_.jpg")',
            'background-position':'center center',
            'background-size':'100%',
            'background-repeat': 'no-repeat',
            'height':initial_height
         });
         $(window).resize(function() {
            map_div_width = $('#map').width();
            map_div_height = (map_div_width*imageHeight)/imageWidth + "px";
            $('#map').css({
            'height':map_div_height
         });
         });
         $('#texas').hover(function(){
            $('#infoTexas').toggle();
         });
      }
   </script>
   <style>
      .cuadro{
         box-sizing: border-box;
         background-color: rgba(0,0,255,0.2);
         border:1px solid black;
         display: inline-block;
         width: 10%;
         height: 10%;
         position: relative;
      }
      .info{
         background-color: white;
         display: none;
         float: left;
         position: absolute;
         z-index: 1;
      }
   </style>
</head>
<body>
   <div id='map'>
      <div class="cuadro">1</div>
      <div class="cuadro">2</div>
      <div class="cuadro">3</div>
      <div class="cuadro">4</div>
      <div class="cuadro">5</div>
      <div class="cuadro">6</div>
      <div class="cuadro">7</div>
      <div class="cuadro">8</div>
      <div class="cuadro">9</div>
      <div class="cuadro">10</div>

      <div class="cuadro">1</div>
      <div class="cuadro">2</div>
      <div class="cuadro">3</div>
      <div class="cuadro">4</div>
      <div class="cuadro">5</div>
      <div class="cuadro">6</div>
      <div class="cuadro">7</div>
      <div class="cuadro">8</div>
      <div class="cuadro">9</div>
      <div class="cuadro">10</div>

      <div class="cuadro">1</div>
      <div class="cuadro">2</div>
      <div class="cuadro">3</div>
      <div class="cuadro">4</div>
      <div class="cuadro">5</div>
      <div class="cuadro">6</div>
      <div class="cuadro">7</div>
      <div class="cuadro">8</div>
      <div class="cuadro">9</div>
      <div class="cuadro">10</div>

      <div class="cuadro">1</div>
      <div class="cuadro">2</div>
      <div class="cuadro">3</div>
      <div class="cuadro">4</div>
      <div class="cuadro">5</div>
      <div class="cuadro">6</div>
      <div class="cuadro">7</div>
      <div class="cuadro">8</div>
      <div class="cuadro">9</div>
      <div class="cuadro">10</div>

      <div class="cuadro">1</div>
      <div class="cuadro">2</div>
      <div class="cuadro">3</div>
      <div class="cuadro">4</div>
      <div class="cuadro">5</div>
      <div class="cuadro">6</div>
      <div class="cuadro">7</div>
      <div class="cuadro">8</div>
      <div class="cuadro">9</div>
      <div class="cuadro">10</div>

      <div class="cuadro">1</div>
      <div class="cuadro">2</div>
      <div class="cuadro">3</div>
      <div class="cuadro">4</div>
      <div class="cuadro">5</div>
      <div class="cuadro">6</div>
      <div class="cuadro">7</div>
      <div class="cuadro">8</div>
      <div class="cuadro">9</div>
      <div class="cuadro">10</div>

      <div class="cuadro">1</div>
      <div class="cuadro">2</div>
      <div class="cuadro">3</div>
      <div class="cuadro">4</div>
      <div class="cuadro">
         <a href="https://www.texas.com/"><img src="https://img.icons8.com/cotton/100/000000/place-marker.png" width="100%" id="texas"></a>
         <div id="infoTexas" class="info">Info sobre Texas Aqui</div>
      </div>
      <div class="cuadro">6</div>
      <div class="cuadro">7</div>
      <div class="cuadro">8</div>
      <div class="cuadro">9</div>
      <div class="cuadro">10</div>

      <div class="cuadro">1</div>
      <div class="cuadro">2</div>
      <div class="cuadro">3</div>
      <div class="cuadro">4</div>
      <div class="cuadro">5</div>
      <div class="cuadro">6</div>
      <div class="cuadro">7</div>
      <div class="cuadro">8</div>
      <div class="cuadro">9</div>
      <div class="cuadro">10</div>

      <div class="cuadro">1</div>
      <div class="cuadro">2</div>
      <div class="cuadro">3</div>
      <div class="cuadro">4</div>
      <div class="cuadro">5</div>
      <div class="cuadro">6</div>
      <div class="cuadro">7</div>
      <div class="cuadro">8</div>
      <div class="cuadro">9</div>
      <div class="cuadro">10</div>

      <div class="cuadro">1</div>
      <div class="cuadro">2</div>
      <div class="cuadro">3</div>
      <div class="cuadro">4</div>
      <div class="cuadro">5</div>
      <div class="cuadro">6</div>
      <div class="cuadro">7</div>
      <div class="cuadro">8</div>
      <div class="cuadro">9</div>
      <div class="cuadro">10</div>

      <div class="cuadro">1</div>
      <div class="cuadro">2</div>
      <div class="cuadro">3</div>
      <div class="cuadro">4</div>
      <div class="cuadro">5</div>
      <div class="cuadro">6</div>
      <div class="cuadro">7</div>
      <div class="cuadro">8</div>
      <div class="cuadro">9</div>
      <div class="cuadro">10</div>
   </div>
</body>
</html>

Nota que si se cambia el tamano del navegador todo se ajusta automaticamente y la imagen que contiene la liga sigue en donde debe ser, en este caso Texas. Obviamente quitarias el background-color,los bordes y los numeros de los cuadros al producto terminado en la clase cuadro. Obviamente si necesitas mas precision pues tendrias que agregar mas cuadros dinamicos, pero pues te sirve de guia para como hacer la malla. Espero te sea util esta idea.

Correct answer by xelfury on August 26, 2021

Add your own answers!

Ask a Question

Get help from others!

Recent Questions

Recent Answers

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP