Coder Perfect

Responsive image map


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

Solution #1

You’ll need to use the following plugin to make responsive image maps:

Stowball’s jQuery-rwdImageMaps may be found at (No longer maintained)


Also check out this website to see if your browser supports it.

Answered by Tom

Solution #2

You can also use svg instead of an image map. 😉

This can be done with the help of a tutorial.

Answered by belgac

Solution #3

Matt Stow’s Responsive Image Maps jQuery Plugin

Answered by Joshua Stewardson

Solution #4

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>

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

Solution #5

I came discovered a technique that uses anchor tags that are absolutely positioned over the image instead of image maps. The main disadvantage is that the hotspot would have to be rectangular, but the benefit is that this method relies just on CSS rather than Javascript. You can generate the HTML code for the anchors using the following website:

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