Координаты карты изображения не работают правильно

Я сделал карту изображений с этим сайтом: 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, но как я могу получить правильные координаты? Я не понимаю

Источник

3 ответа

Решение

Карта изображения использует абсолютные координаты, измеренные в пикселях.

Если вы масштабируете изображение с использованием процентных значений, эти пиксельные координаты не будут масштабироваться вместе с изображением и, следовательно, больше не будут соответствовать первоначально предназначенным частям изображения. Так что просто избегайте использования единиц относительного размера (в процентах, vh, vw) для изображения, имеющего карту изображения.

Источник

Я исправил это сейчас, загрузив изображение с моим любимым размером виджета и не устанавливая ширину.

Источник

Во втором пункте вашего кода image Вместо того, чтобы использовать # Вы просто оставили это пустым, и я думаю, что вы должны использовать .image или же #image

Источник
Другие вопросы по тегам