Responsive image map

html css imagemap
jdog picture jdog · Oct 21, 2011 · Viewed 268.9k times · Source

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?

Answer

Tom picture Tom · Dec 21, 2011

For responsive image maps you will need to use a plugin:

https://github.com/stowball/jQuery-rwdImageMaps (No longer maintained)

Or

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

No major browsers understand percentage coordinates correctly, and all interpret percentage coordinates as pixel coordinates.

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

And also this page for testing whether browsers implement

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

Related questions

How do I give a border around the <area coords>?

I want a border around the active link part of the image that is defined by the coordinates. I currently have implemented to the extent that when the user clicks, the outline is visible by using: outline-color, thanks to href. …

Read More
Highlight a section of an image in JavaScript

I run a small webpage that allows users to click on various links using image maps. I'd like to highlight the section that a user clicks on to give some feedback to the user (they may be clicking on several …

Read More
Is it ok to use image hotspots? Is that the best way to do it in today's world?

I have a picture that needs to be split into 4, and each part must have a link. Do people still use image hotspots?

Read More