Week 281 was posted by Charanjit Chana on 2023-03-13.
This past week, I thought of a layout for Good Gear Club that I could use as a static element but make various bits of it clickable to take you to a featured item. Sounded easy enough but I wondered if I could avoid JavaScript completely and fall back to a native HTML element that I probably haven't used since the late 1990s; the HTML Image Map.
I was pleasantly surprised to find that it did still work, but I don't think I could achieve what I want without either a server side rendered image or maybe by doing something with SVGs.
Not impossible, but maybe not practical either... This is what I wanted to achieve:
Because it's a visually driven component, without some editorial work, the effect doesn't really work if I'm honest. The left and right items are too narrow and the middle one is just too tall. Enough to experiment with, but not practical enough to use. I wouldn't mind building a server side rendering tool but because it requires an editorial decision to be made, it's not for now.
I went ahead and created an example for what I wanted to build anyway over on CodePen. You can see that the individual areas of the image can be used to launch a different product page on Good Gear Club and if you hover, you should see a tool tip.
It was fun taking a trip down memory lane and working with an element I genuinely wouldn't have been surprised to find had been deprecated. Thankfully it lives on (and works in Safari for iOS!) and maybe I'll find a good use case for it soon.
Tags: development, html, image maps