图像贴图坐标无法正常工作

Question

我用这个网站制作了图片地图：https://www.image-map.net/。当我将图像与地图嵌入时，一切正常，直到我整合我的 css 和网站内容的其余部分。

#imagediv {
  width: 45%;
  float: left;
  margin-left: 5.5%;
  margin-top: 8%;
}

img {
  width: 738px;
  max-width: 100%;
  height: auto;
}

<div id="imagediv">
  <img src="extFiles/RZ_Karte.png" alt="" id="map-image" style="width: 738px; max-width: 100%; height: auto;" usemap="#map">
  <map name="map">
    <area style="cursor: pointer;" onclick="showhide('Bayern')" alt="Bayern" title="Bayern" shape="rect" coords="66, 694, 509, 1082">
    <area style="cursor: pointer;" onclick="showhide('Niedersachsen')"  alt="Niedersachsen" title="Niedersachsen" shape="rect" coords="570, 599, 1271, 1094">
    <area style="cursor: pointer;" onclick="showhide('Berlin')" target="_blank" alt="Berlin" title="Berlin" shape="rect" coords="591, 1161, 1051, 1773">
  </map>
</div>

区域已移动，其中一半不存在或位置错误我认为这是因为 CSS 但我怎样才能得到正确的坐标？没看懂。

Answer 1

我现在通过上传我最喜欢的宽度尺寸的图像来修复它，并且不设置宽度..

Answer 2

图像地图使用以像素为单位的绝对坐标。

如果您使用百分比值缩放图像，这些像素坐标将不会与图像一起缩放，因此不再适合最初预期的图像部分。因此，只要避免对具有图像映射的图像使用相对大小单位（百分比、vh、vw）即可。

Answer 3

在你的第二段代码中 image 而不是使用 # 你只是将它留空，我认为你应该使用 .image 或 #image

图像贴图坐标无法正常工作

Image map coordinates not working correctly

html

css

imagemap

coordinates

responsive-design