1 Thing A Week 1 Thing
A Week

Does anyone still use HTML Image Maps?

Week 281.0 — 13th March '23

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:

An image split into three diagonal sections showcasing three different items

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.

More from 1 Thing A Week
« Getting started with Apple's Freeform app Apple unveils M1 Ultra Wealth Inequality »

Advertisement

Notable

Quick links and commentary on interesting articles, videos and more throughout the week.

  1. 281.3 – Wednesday
    1. "I'm A Virgo" trailer Prime Video on youtube.com
  2. 281.4 – Thursday
    1. Jupiter and Venus Converge over Germany Michael Luy on apod.nasa.gov
    2. Honest Trailer for The Goonies Screen Junkies on youtube.com
  3. 281.7 – Sunday
    1. "CHUPA" trailer Netflix on youtube.com

Jump to notable items for Week #280, Week #282 , view the notable archive or my favourites.

About 1 Thing A Week

A website curated by @cchana bringing you 1 Thing A Week, delivered every Monday morning.

You can find a list of all articles in the archive, or read the most popular.

Find out more about 1 Thing A Week or read the privacy policy.

Market

Visit the market and support 1 Thing A Week.

You can find 1 Thing A Week on Twitter, Facebook, Instagram & Reddit