How do i make a responsive image map for a wordpress site i have the following code:
notes: when i run this in editor and remove the width: auto;
max-width: 100%; then the co-ordinates are correct however then its only displayed as the original size and isnt responsive. When its uploaded to wordpress the theme automatically resizes it by default (sets it as responsive)
so basically what im thinking is i need to input somewhere something that can recalculate the area coordinates to match the actual image size on load and on a resize of the window.
Im using one of the many online image map creators to calculate the coordinates however its not working, because i think its giving me the coordinates based on the original image and not on window load&resize.
I understand how its done in something like this pen where its in svg and then the path is just defined with a class or id thats manipulated w css, however in this case its rastor so what do you guys think i should do?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
img {
width: auto;
max-width: 100%;
}
</style>
<title>Image Map</title>
</head>
<body>
<img src="https://example.net/wp-content/uploads/2018/10/Site-FloorPlan.jpg" alt="" usemap="#Map" />
<map name="Map" id="Map">
<area alt="" title="A" href="https://google.com" shape="poly" coords="380,1322,766,1321,761,1184,374,1179" />
<area alt="" title="B" href="#" shape="poly" coords="381,1036,763,1034,766,896,377,899" />
</map>
</body>
</html>