Responsive Image Map

Recently, I was working on a project that needed a responsive image map. What the heck is that? I cannot remember the last time that I had a reason to create an image map, never mind a responsive image map. Whoa, remember image maps?? In my early days, when using Dreamweaver, I remember drawing image maps to link cropped images from Photoshop.

Today, most modern websites utilize less graphic image files than years ago. Web design has changed over the years, so many graphics can be created using CSS or SVG, which can be linked individually. Creating image maps are boring and tedious. I’m not even sure if they follow best practices anymore, because I really never use them. Nor do I see many image maps out there in the wild.

Sometimes, linking graphics with an image map, such a info-graphics, is unavoidable, and sometimes much easier. In the past it was not a problem. But what do we do in this new responsive age? first I tried to resize the image map with a %, similar to the image itself… FAIL!

With a quick Google search, I found this very useful jQuery plugin for creating a Responsive Image Map.

Responsive Image Map

– First, download the plugin: Get it here, from GitHub – courtesy of Matt Stow.

– Add the unit-less width and height attributes to your images. Which you can override these in CSS to make them responsive.

– Make sure you have jQuery included in the header or footer.

– After jQuery, either in a script block or a separate file, call the following:

$(document).ready(function(e) { $('img[usemap]').rwdImageMaps(); });

Now, on smaller devices and browsers, your images will have a responsive image map. Here is a demo from the GitHub page above: Demo

Let me know if this was useful in your projects.