Maybe you should assign a width and a height to the img element that contains the image you are using as map (lamina1.jpg) and maybe you should use the values of the resolution of the image as width and height.
And try again without display:flex and justify-content:center
As the HTML map area required ‘fixed’ (px) values for the coordinates it isn’t very easy to make a shape responsive and other factors such as margin and padding can disturb the positioning.
An alternative way of doing what you require is to put a transparent element of the right shape on top of your image with a polygon shape – the coordinates defined in terms of percentage width and height of the image.
This snippet does the calculation for you, using the coordinates given in your question but making an assumption about the actual image height and width (the dimensions it had when you found the coordinates). Put the actual image height and width (768 and 1024 used here as a demo – and a guess with a demo image)
function imageMenu() {
alert('I am in imagemenu');
}.map {
position: relative;
display: inline-block;
width: 50vw;
/* these sizes just for demo */
height: auto;
}
.polygon {
--imgw: 1024;
/* the width of the img when measured REPLACE WITH YOUR REAL ONE */
--imgh: 768;
/* the height of the img when measured REPLACE WITH YOUR REAL ONE */
--w: calc(100% / var(--imgw));
--h: calc(100% / var(--imgh));
clip-path: polygon(calc(635 * var(--w)) calc(206 * var(--h)), calc(655 * var(--w)) calc(229 * var(--h)), calc(647 * var(--w)) calc(273 * var(--h)), calc(657 * var(--w)) calc(277 * var(--h)), calc(659 * var(--w)) calc(316 * var(--h)), calc(694 * var(--w)) calc(318 * var(--h)), calc(725 * var(--w)) calc(359 * var(--h)), calc(768 * var(--w)) calc(316 * var(--h)), calc(777 * var(--w)) calc(360 * var(--h)), calc(746 * var(--w)) calc(376 * var(--h)), calc(731 * var(--w)) calc(389 * var(--h)), calc(714 * var(--w)) calc(410 * var(--h)), calc(699 * var(--w)) calc(416 * var(--h)), calc(730 * var(--w)) calc(457 * var(--h)), calc(717 * var(--w)) calc(489 * var(--h)), calc(700 * var(--w)) calc(504 * var(--h)), calc(683 * var(--w)) calc(531 * var(--h)), calc(659 * var(--w)) calc(566 * var(--h)), calc(650 * var(--w)) calc(577 * var(--h)), calc(630 * var(--w)) calc(510 * var(--h)), calc(611 * var(--w)) calc(251 * var(--h)));
background-color: rgba(255, 255, 255, 0.7);
/* for demo so you can see its shape - put to opacity 0 for a real trial */
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: inline-block;
}<div class="map">
<img src="https://picsum.photos/id/1016/1024/768">
<div class="polygon" onclick="alert();"></div>
</div>Note – using flex or other ‘automatic’ positioning within the containing element might disturb the positioning so it’s not used here.
I am using a map tag in my html with several coordinates on an image. The idea is that the user when clicking on that image, a message or another image will pop. But at the moment the pointer is not correct, it is as if the image moved towards one side and the map stayed somewhere else, I reckon the map moved like abou 100px towards the left… so now the pointer comes over something else. I don’t know why. I used flex, but even before using flex didn’t work. I used www.image-map.net
.presentacion-lamina {
display: flex;
justify-content: center;
}<div class="presentacion-lamina">
<img src="images/lamina1.jpg" usemap="#image-map">
<map name="image-map">
<!-- Right flank es el area de los costados de la lamina 1, solo el lado derecho -->
<area target="" alt="right_flank" title="right_flank" href=""
coords="635,206,655,229,647,273,657,277,659,316,694,318,725,359,768,316,777,360,746,376,731,389,714,410,699,416,730,457,717,489,700,504,683,531,659,566,650,577,630,510,611,251"
shape="poly" onclick="imageMenu()" class="right_flank">
<div id="imageDropdown" class="dropdown-content show">
<img src="images/lamina1/Dd21.gif" alt="" srcset="" class="localizaciones">
<img src="images/lamina1/Dd26.gif" alt="" srcset="" class="localizaciones">
<img src="images/lamina1/Dd27.gif" alt="" srcset="" class="localizaciones">
<img src="images/lamina1/Dd28-DdS28.gif" alt="" srcset="" class="localizaciones">
</div>
</div>Hi, I don’t understand how this is responsive – it seems to be just an HTML map with fixed coordinates so any variation (like padding, or screen size) will mean it’s out. Am I missing something? There’s nothing to tell us which area you actually want so perhaps you could put up a snippet with the image and explain what area you want.
I’ve modified your code to use a Stack Snippet (to edit,
Could you tell us the dimensions of your map image – then we can convert to % and use a different method which will adjust to different devices more easily.