> <i>My first thought was to embed anchors into the external map SVG: […]</i><p>> <i>This approach is problematic. Those anchors are only active when SVG is inline and don’t work with an <img> element.</i><p>No, this approach is fine: you just need to use <object data=…> instead of <img src=…>. <object> is the correct choice for embedding interactive SVG.<p>But you probably do want the SVG to be inline anyway, because it will load faster and is in this case actively the content of the page; which is the technical decision he ended up at, though perhaps for partly the wrong reason.<p>(There’s also <iframe>.)
wow, I used to make so many games with image maps back when I first learned HTML. One still survives: <a href="https://andrew.fi/beowulf/game/" rel="nofollow">https://andrew.fi/beowulf/game/</a>
> Anchors positioned absolutely over my map wouldn’t solve the pixel-based positioning problem or give me the irregular-shaped clickable areas I wanted. Anchors within an external SVG wouldn’t work either.<p>If you're trying something like this and irregular-shaped clickable areas are not a concern (like if only the numbered circles from the article's example would be clickable) then absolutely positioned anchors can be made to work. The trick is to use js to apply a css scale transformation to a relatively positioned parent container whenever the underlying image changes size.
for those of you using something like their technique of opacity animating a clip-path region from one look to another upon ~click ...<p>if you wish to be visually kind to safari users you can eliminate the default gray selection indication flash animation safari does upon a tap activation with just a tiny bit of webkit-only css , for example ...<p>#links { -webkit-tap-highlight-color : transparent ; }<p>added to the css of their codepen fixes it (without causing any issues for other/std browsers afaik)
> Image maps date all the way back to HTML 3.2, where, first, server-side maps and then client-side maps defined clickable regions over an image using map and area elements.<p>Server-side image maps were specified in HTML 2.0, in section 7.6 of RFC1866.
TFA takes us on this journey and then at the end, "Image maps ended up not working for us" without telling us what they did. My money is on JavaScript for that "expressive" aspect of the hover.