Responsive Image Map Plugin … No, Seriously
So let me take you back to when glittery animated gifs were the norm, dancing baby images were on Ally McBeal and all over the internet and Pearl Jam wasn’t classic rock. Image maps were used a LOT back then for creating hot spots on images to provide links without having to slice up any images.
The use of image maps is obviously an old school, not-used-very-much, if at all, method today but once in a great while you’ll get a task that requires digging back far into your past. This was one such case…
This is really marrying something new (responsive design) with something old (image maps). I wrote a plugin that allows you to select which image map you’d like to make responsive. The plugin takes the original coordinates of each map > area and stores it in an array – once the image size changes, it takes the percentage the width has changed and updates the coordinates in the array by that percentage and stores them in a new array to use to resize the map areas.
- responsive-image-map.js – Attach this to your html page
- JSFiddle Link (image and image map courtesy of wikipedia)
How to Use It
Each image and image map must be in their own container with unique class
<div class="image-map-wrapper us-map"> <map id="ImageMap_1_806238118" name="ImageMap_1_806238118"> <area title="Alabama" alt="Alabama" coords="537,310,..." shape="poly" href="/wiki/Alabama"> <area title="Alaska" alt="Alaska" coords="127,381,..." shape="poly" href="/wiki/Alaska"> </map> <img width="800" height="495" usemap="#ImageMap_1_806238118" src="..." alt=""> </div>
then in your script you will call your function with 2 attributes – the class selector and the original image width when the image map was created