Image Maps
What Is It?
An image map makes different areas of one picture clickable.
What the Tags Mean
img usemap: connects the picture to a map.map name: names the map.area: defines a clickable area.coords: gives its position in pixels.
Example 1
Save each example as index.html and open it in your browser. Each code block is a complete page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Maps</title>
</head>
<body>
<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22300%22%20height%3D%22200%22%20viewBox%3D%220%200%20300%20200%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22lightblue%22%2F%3E%3Ctext%20x%3D%2220%22%20y%3D%22100%22%20font-size%3D%2224%22%3EClick%20the%20left%20half%3C%2Ftext%3E%3C%2Fsvg%3E" width="300" height="200" usemap="#rooms" alt="Room plan">
<map name="rooms">
<area shape="rect" coords="0,0,150,200" href="#library" alt="Library">
</map>
<h2 id="library">Library</h2>
</body>
</html>Browser preview
What you see: The left half of the included picture links to the Library heading. No picture file is needed.
Example 2: Another Use
Offer a normal text link to the same place too.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Maps</title>
</head>
<body>
<a href="#library">Library information</a>
<h2 id="library">Library</h2>
<p>The library is open on Saturday at 10 am.</p>
</body>
</html>Browser preview
Simple Tip
Coordinates depend on image dimensions. Resizing the picture can make clickable areas stop lining up.
Try It Yourself
Add a second rectangular area for the right half of the image.