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.

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 comment

Your e-mail address will not be published. Required fields are marked *

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

This website uses cookies in order to provide you with the best possible experience when using the website. Privacy policy.