I already have an image map set up in a responsive html style. The picture coordinates are plainly fixed pixel sizes, but the image scales according to the browser size. What are my options for resizing the picture map coordinates?
Asked by jdog
You’ll need to use the following plugin to make responsive image maps:
Stowball’s jQuery-rwdImageMaps may be found at https://github.com/stowball/jQuery-rwdImageMaps (No longer maintained)
Also check out this website to see if your browser supports it.
Answered by Tom
You can also use svg instead of an image map. 😉
This can be done with the help of a tutorial.
Answered by belgac
Matt Stow’s Responsive Image Maps jQuery Plugin
Answered by Joshua Stewardson
If you don’t mind rectangular hit regions, I found a non-JS solution to this.
First and foremost, ensure that your image is contained within a div that is relatively positioned. Then, inside this div, place the image, which will take up all of the div’s area. Finally, under the picture, within the main div, add absolutely positioned divs with percentages for top, left, width, and height to get the link hit regions the size and position you desire.
When you’re just starting off, I find it best to give the div a black background color (preferably with some alpha fading so you can see the linked content underneath) and alter the percentages in real time using a code inspector in your browser.
Here’s a simple outline you can use to get started. When you work with percentages, you can ensure that the pieces retain the same size and position as the image scales.
<div style="position: relative;"> <img src="background-image.png" style="width: 100%; height: auto;"> <a href="/link1"><div style="position: absolute; left: 15%; top: 20%; width: 12%; height: 8%; background-color: rgba(0, 0, 0, .25);"></div></a> <a href="/link2"><div style="position: absolute; left: 52%; top: 38%; width: 14%; height: 20%; background-color: rgba(0, 0, 0, .25);"></div></a> </div>
Adjust the percentages (you may use decimal percentages to be more precise) with your code inspector in Chrome or your preferred browser until the boxes are just correct. When you’re ready to utilize it, choose a translucent background color since you want your hit regions to be invisible.
Answered by Tom Bisciglia
Everything worked fine on window resize and on my mobile phone after I put the image and the produced anchor tags in a relatively positioned div element.
Answered by Jeffrey Langham
Post is based on https://stackoverflow.com/questions/7844399/responsive-image-map