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