HTML image mapping that works on mobile
Hello! I have a wordpress site with the BeTheme theme installed. It has slides, among other features. I am mapping an image and for this I used Gimp. It worked almost perfectly, except for the fact that the coordinates are wrong, and the clickable areas were out of position relative to the image. This is a problem I have not been able to solve yet, but there is something else. When the site is accessed by mobile, the mapping does not work.
So, I have these two questions to solve, and I hope to get some help from you: 1-Why do the coordinates "do not beat"? 2 - How to make image mapping responsive?
This is the page in question: http://montanhasmagicas.com.br/guia-para-montanha /
Below is the code I put on this page:
Here in this section you will find the coordinates of the main tourist points of city.
I am grateful for any cooperation from the members.
1 answers
Is site ( https://www.zaneray.com/responsive-image-map / ) generates the responsive html/css code that will be needed for your map.
Insert your map image there ( http://montanhasmagicas.com.br/wp-content/uploads/2018/06/Mapa-Andrel%C3%A2ndia.png ) and click "GO". The image will appear and you can drag the block from the first link (on the left) and configure. Then click "ADD LINK" and repeat the process for the remaining links.
In footer da page will appear the HTML / CSS code needed for you to put on your page.
Ex:
<a href="" title="xxxx" style="position: absolute; left: 38.37%; top: 16.93%; width: 9.69%; height: 10.19%; z-index: 1;"></a>
I also suggest that you allow the image to be enlarged when on a mobile phone, as the map will be unreadable on small screens. But with this responsive code, the links will remain in the correct place, regardless of the size of the image.