Question

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

＆＃13;

#imagediv {
  width: 45%;
  float: left;
  margin-left: 5.5%;
  margin-top: 8%;
}

img {
  width: 738px;
  max-width: 100%;
  height: auto;
}

＆＃13;

<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>

＆＃13;

区域被移动，其中一半不在那里或在错误的地方我认为这是因为CSS，但我怎样才能获得正确的坐标？我不明白。

Answer 1

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

Answer 2

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

如果使用百分比值缩放图像，则这些像素坐标不会与图像一起缩放，因此不再适合原始图像部分。因此，请避免对具有图像映射的图像使用相对大小单位（百分比，vh，vw）。

Answer 3

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

图像映射坐标无法正常工作

3 个答案: