0

It works just fine on Chrome Browser on my laptop, but it doesn't work at all on my mobile smartphone. Is there anyone who solved this issue?

<img id="image" src="login.jpg" width="1080" height="2160" usemap="#Map" >
<map name="Map">
  <area target="_self" shape="rect" coords="272,1625,820,1740" href="buyer_profile.html">
  <area target="_self" shape="circle" coords="814,2088,40" href="back.html">
</map>
Buddy Christ
  • 1,364
  • 8
  • 22
RaDra
  • 21
  • 5
  • – RaDra Apr 07 '20 at 20:54
  • Does this answer your question? [Responsive image map](https://stackoverflow.com/questions/7844399/responsive-image-map) – jeprubio Apr 07 '20 at 20:55
  • You need to be *specific*. What's not working? What's your mobile phone? I have an example image map which works on iPhone, so you need to add more detail and clarify. – RamblinRose Apr 07 '20 at 21:09
  • The defined clickable areas are not working on mobile phone. I tried on Chrome Browser from my Android 8.1 smartphone. I tried with Ghostery Browser and it didn't work either. On Google Chrome Developer Tools I've created a device with the same resolution as the image 1080x2160 and only in this case I was able to click on the defined area map. Here is the link if you want to test bit.ly/34kXuem (the defined area is around Login button) – RaDra Apr 08 '20 at 06:22

1 Answers1

0

Just found out that viewport height & width are different than image size. In my case I had to divide by 3 the map area coordinates and everything is just fine now.

An elegant solution would be one that can adjust the coordinates dynamically according to the ratio between the image size and actual viewport size.

RaDra
  • 21
  • 5