Responsive image maps with roll-overs

February 26, 2013

US map with regionsOne of our clients asked us to create an interactive map of the US for use on their website. The map needed to be divided into different regions, and when the user clicked on any of those regions they would be taken to a page showing the corresponding sales representative. This was a very basic case that involved an image map. The original image is on the right (click to enlarge).

We got the image map working in no time. There are several tools that aid the task of creating an image map; we opted for the Online Image Map Editor.

Once we got the image map working we realized that we needed to add some kind of mouseover so it was clear for the user which section they were selecting. We used David Lynch's maphighlight javascript v1.3 to achieve this functionality. David wraps the image with div, and then places a canvas inside that div on top of the image. Finally he draws the selected area on the canvas by hand using beginPath, moveTo, and lineTo html5 methods. Everything was working fine and dandy... until we realized that the image map areas didn't show up properly if the image wasn't full size.

The problem came up because we were using a responsive design that automatically resized the image based on the browser size, and the rollovers were not working at all when the map was smaller than the original. In order to fix this problem we decided to use Matt Stow's responsive image jquery plugin. When we tried this plugin by itself the map worked fine, detecting resizes and changing the hit areas of the map to match accordingly. However, when we combined both plugins we hit a wall. The div, canvas and image created by the higlight plugin were not responsive at all since they had fixed sizes, absolute positions, and no margin- left / right properties set.

It took us a bit of time and tweaks to come up with a revised version of David's plugin. One of the biggest challenges we had, was actually posed by a task that you might consider somehow simple- getting a div offset. Somehow Firefox returns 0px when we tried to determine the left margin of the image inside the div using img.css("marginLeft").replace('px', '');. We had to determine the offset by calculating the offset of the div and the image against the document and then calculating the difference. This is how that margin left offset looks:

var div_offset;
if ( $.browser.mozilla) {
      div_offset =wrap.offset().left;
} else {
      margin_left=img.css("marginLeft").replace('px', '');

You can download the modified javascript files from here.  They have been tested on IE9, Firefox, and Chorme. You can see the results below. Try resizing the page and rolling over any of the sections of the map.


some stats

lunches with clients this year
dances in the rain this year (very rainy!)
songs in our music library
graphic pieces created this month
carafes of coffee per day
dog walks this month (and counting)