[rikroots]

I used to love image maps: really useful for adding hotlinks and hover effects to images. Sadly they can't deal with the modern responsive web - though there exist some Wordpress plugins to help overcome that issue.

This CSS article[1] goes into details about alternative approaches. It mainly seems to be SVG, or CSS clip paths. I've used (and like) SVG; CSS clip paths are foreign territory to me - has anyone used them in production to replicate image map functionality?

One of the goals I made for myself when developing my canvas library[2] was to bring image-map-like functionality to the <canvas> element - but as responsive and accessible as I could make it. It's still a work-in-progress but I'm getting there!

[1] - https://css-tricks.com/the-many-ways-to-link-up-shapes-and-i...

[1] Scrawl-canvas - https://scrawl-v8.rikweb.org.uk/

[52-6F-62]

I do like the example with the pins/labels on an image. Seems like it would be useful for something like Wikipedia or recipes, etc.

Is it accessible-friendly?

[rikroots]

Thank you! It tries to be.

You should be able to tab through the pins using the keyboard, and 'click' a pin by pressing the return button (mileage may vary between browsers and devices). The text labels and links themselves also exist inside <div> elements immediately following the <canvas> element (automatically added by the library when it picks up a canvas, and when creating canvas text and links) ... but I don't know how useful/convenient this is for users restricted to screen readers.

[winrid]

Don't CSS transforms work on image maps? I bet you could do some media query magic + scale() to make it work.