Image Map
Write a circular area centred at 50,50 with radius 20 and a useful alternative.
Understand the topic
An image map associates different regions of one image with different links. The img usemap value references a map name. Each area defines a shape, coordinates, destination, and text alternative. Coordinates correspond to image pixels, so a map needs care when the displayed size changes. A normal list of links is often easier to maintain and use.
Worked example
<img src="/assets/icons/kanbritech_favicon.png" alt="Academy links" width="96" height="96" usemap="#academy-map">
<map name="academy-map">
<area shape="rect" coords="0,0,96,96" href="#academy" alt="Academy information">
</map>
<h2 id="academy">Academy information</h2>The rectangular area covers the displayed 96-by-96 image. For a production map, match coordinates to the actual image dimensions and provide equivalent text links.
Practice
Write a circular area centred at 50,50 with radius 20 and a useful alternative.
Show a suggested answer
<area shape="circle" coords="50,50,20" href="library.html" alt="Library information">Common mistake
Do not use vague alternatives such as "area one". Each area is a link and needs a meaningful accessible name.