Responsive imagemap with interactive highlighting function

A short post to help anyone who is looking to implement a responsive HTML imagemap, which also features an interactive highlighting function. I’ve had to build just this for an SBB project, and make sure that it works flawlessly from a vertical-format tablet right up to a large iMac screen.

Update in March 2020: there’s a new kid on the block, and his name is SVG.

Now, back to the original post.

Building the imagemap is simple. I use Adobe Dreamweaver – yes, still – to create the clickable areas, then add the jQuery plugin “rwdImageMaps” to make the clickable areas adjust to the variable dimensions of the underlying image.

To add a visible interaction for each AREA tag, which isn’t possible using pure CSS, I use a second jQuery plugin called “Maphilight”. This plugin adds a dynamic CANVAS element to the page, which is then controlled by JavaScript when (for example) hovering over an AREA.

To get the two jQuery plugins to work together, load them both in the footer of the HTML page. (I use requireJS.) Then use the following code – paying attention to the sequence of the function calls – to initialise and watch the imagemaps for resize events.

Leave a Reply

Your email address will not be published. Required fields are marked *

For security, use of Google’s reCAPTCHA service is required which is subject to the Google Privacy Policy and Terms of Use.

I agree to these terms.

This site uses Akismet to reduce spam. Learn how your comment data is processed.