Revisiting Image Maps
13 comments
·May 9, 2025chrismorgan
King-Aaron
> There’s also <iframe>
Now that's a name I've not heard in a long time...a long time.
ogou
If you're looking at any web page with ads or tracking, it has many iframe elements. The javascript that loads them usually creates an iframe and the ad appears there. A typical newspaper site could have 5-50 iframes on each page.
zyberzero
Really? I'd say image maps was the name I haven't heard in a long time... As in I read a couple of paragraphs before it dawned on me that it was _that_ type of image maps that post was about - I first thought it was something regarding rasterized maps (like OpenStreetMap or something)
seabass
> 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.
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.
kristel100
Wow, flashback. Used these for interactive campus maps back in college. Interesting to think they still have use cases in ultra-light, JS-free sites. Almost retro-cool now.
M95D
This is all because of web standards playing catch-up with implementations instead of the other way around.
ag8
wow, I used to make so many games with image maps back when I first learned HTML. One still survives: https://andrew.fi/beowulf/game/
bni
Thanks for posting this.
I met the dragon and died I think.
chrismorgan
There is no way to defeat the evil dragon Hrathogwar. View the page sources to more easily traverse the URL graph, and confirm there is no escape. You can wander back and forth forever, but if you try to progress, to make Hrothgar happy, you get stuck.
Corey_
[dead]
notarealllama
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.
chrismorgan
The last third describes exactly what he did.
> My first thought was to embed anchors into the external map SVG: […]
> This approach is problematic. Those anchors are only active when SVG is inline and don’t work with an <img> element.
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.
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.
(There’s also <iframe>.)