时间戳

首页 > 解决方案 > 我的地图上图像上的指针在我的 html 上不准确

html - 我的地图上图像上的指针在我的 html 上不准确

问题描述

我在我的 html 中使用了一个地图标签，图像上有几个坐标。这个想法是，当用户单击该图像时，会弹出一条消息或另一个图像。但是此时指针不正确，就好像图像向一侧移动而地图停留在其他地方，我认为地图向左移动了大约 100px ......所以现在指针指向其他东西。我不知道为什么。我使用了 flex，但即使在使用 flex 之前也不起作用。我用www.image-map.net

.presentacion-lamina {
  display: flex;
  justify-content: center;
}
<div class="presentacion-lamina">
  <img src="images/lamina1.jpg" usemap="#image-map">

  <map name="image-map">
        <!-- Right flank es el area de los costados de la lamina 1, solo el lado derecho -->
        <area target="" alt="right_flank" title="right_flank" href=""
            coords="635,206,655,229,647,273,657,277,659,316,694,318,725,359,768,316,777,360,746,376,731,389,714,410,699,416,730,457,717,489,700,504,683,531,659,566,650,577,630,510,611,251"
            shape="poly" onclick="imageMenu()" class="right_flank">

        <div id="imageDropdown" class="dropdown-content show">
            <img src="images/lamina1/Dd21.gif" alt="" srcset="" class="localizaciones">
            <img src="images/lamina1/Dd26.gif" alt="" srcset="" class="localizaciones">
            <img src="images/lamina1/Dd27.gif" alt="" srcset="" class="localizaciones">
            <img src="images/lamina1/Dd28-DdS28.gif" alt="" srcset="" class="localizaciones">
        </div>
</div>

标签： htmlcsscoordinates

解决方案

Maybe you should assign a width and a height to the img element that contains the image you are using as map (lamina1.jpg) and maybe you should use the values of the resolution of the image as width and height.

And try again without display:flex and justify-content:center

推荐阅读