activeImageMap script

Jan 2

Happy 2020 everyone! It's... been a while

Here's something for the new year: A little script I've been working on to solve two issues with HTML imagemaps. First, it builds on some code found on StackOverflow to dynamically resize <area> element coordinates so that imagemaps can behave responsively. Second, it appends <a> elements to the <map> element overlapping the <area> elements exactly, so they can be visually styled with CSS.

One of the biggest issues with imagemaps is the fact that the hyperlinks available in the map are invisible and the only indicator they exist is when the user hovers the mouse cursor over them. In a mobile environment, where mouse-hover doesn't make any sense, using imagemaps at all seems like an accessibility mistake on par with mystery-meat navigation.