I made an image map with this website: https://www.image-map.net/. When I just embed the image with the map evrything works fine until I integrate my css and the rest of my website-content.
#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>The areas are moved and half of them aren't there or at a wrong place I think it's because of the CSS but how can I get the right coordinates? I don't get it.
An image map uses absolute coordinates, measured in pixels.
If you scale the image by using percentage values, those pixel coordinates won't scale together with the image and therefore not fit the originally intended image parts anymore. So just avoid using relative size units (percentage, vh, vw) for an image that has an image map.