[kevsim]

I feel like I'm missing something. It seems like declare a <map> element, associate it with an <img>, but then use JS to iterate over the map and build a bunch of absolutely positioned <div> elements on top of the image. Why not just have the annotations stored outside the DOM (returned by API or whatever) and just build the absolutely positioned <div> elements? Wouldn't that avoid the fighting with funky coordinate systems, etc.?

I get why <map> is (was?) useful in general, but if you're going to do your own annotation rendering on top anyway, it just seems odd. Fun exercise though!

[perilunar]

If image maps only allowed rectangular areas, they wouldn't be terribly useful — you're right that it would be almost as easy to lay some transparent divs over the image.

However... image maps also allow for circular and polygonal regions, which can be really handy.

I guess you could also do that with a transparent SVG overlay, but using a map is easier.

[kevsim]

Right, but in this example, the author is laying divs on top of the map areas, and those need to be rectangles.

[Sharlin]

The annotation divs have to be rectangles, but the mouse/touch-sensitive areas of the underlying image don't! The author's goal is to only show an annotation if the user hovers over/touches its corresponding region in the image map.