Responsive image map

Problem

I have an existing image map in a responsive html layout. Images scale according to browser size, but the image coordinates are obviously fixed pixel sizes. What options do I have to resize the image 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 https://github.com/stowball/jQuery-rwdImageMaps (No longer maintained)

Or

https://github.com/davidjbradshaw/imagemap-resizer

http://www.howtocreate.co.uk/tutorials/html/imagemaps

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

http://home.comcast.net/~urbanjost/IMG/resizeimg3.html

Answered by Tom

Solution #2

Instead of an image map, you can use svg.

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>
</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

Solution #5

I came discovered a technique that uses anchor tags that are absolutely positioned over the image instead of image maps. The only drawback would be that the hotspot would have to be rectangular, but the plus is that this solution doesn’t rely on Javascript, just CSS. There is a website that you can use to generate the HTML code for the anchors: http://www.zaneray.com/responsive-image-map/

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