Image html mapping that works on mobile

Navigation
0

Hello! I have a wordpress website with the BeTheme theme installed. It has slides, among other features. I'm doing the mapping of 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 in relation to the image. This is a problem I have not yet solved, but there is something else. When the site is accessed by mobile, mapping does not work.

So, I have these two questions to solve, and I hope to get your help: 1- Why do not the coordinates "beat"? 2- How to make the image mapping responsive?

This is the page in question: link

Below is the code I placed on this page:

Here you will find the coordinates of the main tourist attractions in the city.

Thanks in advance for any help from the members.

    
asked by anonymous 27.06.2018 / 04:13

1 answer

0

This site ( link ) generates the responsive html / css code that will be needed for your map

Insert the image of your map there ( link ) and click "GO". The image will appear and you can drag the block from the first link (left) and configure it. Then click "ADD LINK" and repeat the process for the other links.

In the page footer the HTML / CSS code you need to put on your page will appear.

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 allowing the image to be magnified when on a cell phone, as the map will be unreadable on small screens. But with this responsive code, the links will remain in place, regardless of the size of the image.

    
27.06.2018 / 04:33
Number Sorter - PHP Format number with javascript