Mobile Responsive Image Map

When you change the website to mobile responsive design, a lot of small problems start popping up. One of them is the Image Map. Based on the browser size/screen resolution, the large image will be scaled down. If there's just a link, no problem. However, if you use image map, it will be a problem. The image map is defined by the coordinates of horizontal position and vertical position. When image size changes, these coordinates also changes.

As in all of my previous posts, I use bootstrap and jQuery for my sites and this problem can be easily solved with a jQuery plugin called jQuery RWD Image Maps.

Framework used: jQuery / Bootstrap

Here's one example. There's a link where it says "Click Here for Details." If you resize your browser, the image resizes as well and the link is still intact where it should be.

Image Map Demo

Image Map Demo

Here is the code. Very easy, just link to jQuery plugin and 1 line of script does all the work for you. There's no need to edit the image code.

HTML

JS