#30DaysofHTML Day 27: < map > and < area >

Image maps are still a thing!

and

Apr 27, 2021

Back in the Dark Times Before CSS, we used to do a ton of work creating graphics in Adobe Photoshop. We'd make lots of images to use on websites because HTML as a construction for building web pages was pretty limiting.

One of our techniques to skirt ancient limitations was to use large images marked up with clickable areas, using the <map> and <area> elements in HTML. This allowed us to have the crazy layouts we wanted to have but had no way to make.

Today, this technique has fallen out of favor -- or perhaps younger developers never learned it in the first place. Multiple clickable areas in a single image may still be useful, particularly for graphics with oddly shaped clickable areas (like a map of political boundaries).

✏️ An Editorial Moment ✍️

Why walk through a technique that, arguably, is completely outdated for modern web development?

✅ It's not deprecated, and it could still be used.

🌈 One of our goals in #30DaysofHTML is to increase your HTML vocabulary. Even if you have no intention of using an image map any time soon, we'd like you to know it exists. Who knows when this might be useful?

👍 We assume most of our readers have little experience in creating an image map, or they have not created an image map in many years. We'll walk through how this is done with our current toolset, including how to make the image map responsive.

Image map example

Pexels offered us this beautiful photo of some dishes on the table.

Photo of four food dishes and two empty plates on a table.

Photo by Taha Samet Arslan from Pexels

Wouldn't it be lovely if people could click on the dish and get a link to a recipe? Or maybe they click on the dish and are taken to a website where they could buy that exact item? Let's walk through that process.

Step 0: Understanding the image map

Image maps consist of three HTML elements:

The image itself, with a usemap attribute linking the image to the map
The <map> element, which contains the image map information and a name attribute which links the map to the image
<area> elements, each corresponding to a clickable hotspot. Each <area> element has a shape attribute, describing the shape of the hotspot. Values for shape include circle, rect, or poly.

A typical image map might look like this:

<img src="food.jpg" alt="Image of four dinner dishes sitting on a table with plates, knives, and forks." usemap="#map">

<map name="map" id="map">
    <area alt="Link to recipe for chicken cashew stir-fry." 
          target="_blank"
          href="https://www.allrecipes.com/" 
          coords="228,492,367,498,426,588,298, 697,166,688,100,614,128,548" 
          shape="poly">

    <area alt="Example to show link going elsewhere on this website" 
         href="nextpage.html" 
         coords="531,301,727,525" 
         shape="rect">

    <area target="_blank" 
          alt="Visit Ikea.com to buy these plates." 
          href="https://www.ikea.com/" 
          coords="990,723,261" 
          shape="circle">
</map>

The coords attribute describes a series of X-Y coordinates (and a radius, in the case of the circle) for the clickable area. Refer to MDN for a full explanation of coords.

Step 1: Creating the image map

Back in the day, Dreamweaver had an image mapping interface baked into its editor, which made setting up the coordinates and the rest of the code very simple.

We understand it's unlikely you're using Dreamweaver today. (We aren't.) However, image map utilities still exist. We like the one at www.image-map.net, but there are others. Upload your image, click and drag on the image to create the hotspot(s), generate the code, and incorporate it in your document.

Step 2: Copy and paste the code

The <img> and its <map> may be separated in your document without issue. Place the <map>, for example, just before </body> (perhaps in your <footer> element). The <img>, of course, will occur wherever it needs to appear in your document.

🖥 We offer the above image with map working in today’s CodePen demo.

Step 3: Making your image map responsive

⚠️ ⚠️ ⚠️ Image maps were first created before responsive design was a thing. Therefore, the image map that works beautifully on your desktop device will not work with a scaled image on a mobile device, meaning the map will get out of sync with its underlying image. Boo. 👎

There are solutions to this issue, all of which involve JavaScript. This StackOverflow thread offers several starting points.

Please let us know if anyone has a way to make responsive image maps work with HTML and CSS alone.

Accessibility considerations

✅ The W3C Web Accessibility Initiative (WAI) offers tips for image map accessibility. Provided that developers offer excellent, meaningful alt text for the image and its hotspots, it seems that much of the hard work is done.

🎉📚Get the #30DaysofHTML e-book📚🎉

We are super excited to announce our e-book!

Email is great, and blogs are awesome, but it can be challenging to use them as a reference in the future. We'll be assembling this month's work into an e-book. Would you like a copy?

☕️ If you are financially able to do so, buy us a coffee (or two, or five!). Coffees are $5 each, and the e-book starts at $6 (and will go up from there).

🎉 If you already bought us a coffee, you get an e-book! 😁 🎉

👍 Or spread the word and we'll give you a free e-book! Choose one of these below:

Mention and link to at least one post from #30DaysofHTML in your newsletter by April 30. (If you’ve already done this, you get a free e-book!)
Retweet this e-book announcement, or talk about the e-book on other social media platforms, by April 30!

We will assemble the e-book from these past posts and emails and get that out to you as soon as possible. We anticipate it will be no later than June 30.