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