Image html mapping that works on mobile

Asked

Viewed 716 times

0

Hello! I have a wordpress site with the theme Betheme installed. It features slides, among other features. I’m mapping an image and for that I used the 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 that 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 issues to resolve, and I hope to get your help: 1- Why do the coordinates "not match"? 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 the city.

Thanks in advance for any cooperation from the members.

html image responsive

  • It would be important if you put your current html/css code.

  • 1- The coordinates do not match because you need to pass the coordinates correctly. If you used software that did this and the result was incorrect, uninstall it because it doesn’t fit. 2- Responsive mapping you can use this plugin: https://answall.com/a/265824/8063

1 answer

1

This site (https://www.zaneray.com/responsive-image-map/) generates the responsive html/css code that will be required for your map.

Insert the image of your map there (http://mountaasmagicas.com.br/wp-content/uploads/2018/06/Mapa-Andrel%C3%A2ndia.png) and click on "GO". The image will appear and you can drag the block from the first link (left) and configure. Then click on "ADD LINK" and repeat the process for the other links.

At the bottom of the page will appear the HTML/CSS code you need 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 magnified when on a mobile phone, because the map will be unreadable on small screens. But with this responsive code, the links will stay in place regardless of the image size.

Browser other questions tagged html image responsive

You are not signed in. Login or sign up in order to post.