HtmlHow-ToBeginner · 4 min read

How to Create Image Map in HTML: Simple Guide with Example

To create an image map in HTML, use the <map> element with one or more <area> tags defining clickable regions by coordinates. Link the map to an image using the usemap attribute on the <img> tag.

📐

Syntax

An image map uses the <map> element to define clickable areas on an image. Each clickable area is defined by an <area> tag inside the map. The usemap attribute on the <img> tag connects the image to the map.

<img src="image.jpg" usemap="#mapname">: The image with a reference to the map.
<map name="mapname">: Container for clickable areas.
<area shape="rect|circle|poly" coords="x1,y1,x2,y2,..." href="link.html" alt="description">: Defines a clickable region with shape and coordinates.

html

<img src="example.jpg" usemap="#examplemap" alt="Example Image">
<map name="examplemap">
  <area shape="rect" coords="34,44,270,350" href="https://example.com/rect" alt="Rectangle">
  <area shape="circle" coords="337,300,44" href="https://example.com/circle" alt="Circle">
  <area shape="poly" coords="290,172,333,250,300,300" href="https://example.com/polygon" alt="Polygon">
</map>

💻

Example

This example shows an image with three clickable areas: a rectangle, a circle, and a polygon. Clicking each area takes you to a different link.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Image Map Example</title>
</head>
<body>
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Fronalpstock_big.jpg/640px-Fronalpstock_big.jpg" usemap="#mountainmap" alt="Mountain" style="max-width:100%;height:auto;">
  <map name="mountainmap">
    <area shape="rect" coords="50,50,200,150" href="https://en.wikipedia.org/wiki/Mountain" alt="Rectangle Area">
    <area shape="circle" coords="300,200,50" href="https://en.wikipedia.org/wiki/Peak" alt="Circle Area">
    <area shape="poly" coords="400,100,450,150,420,200" href="https://en.wikipedia.org/wiki/Range" alt="Polygon Area">
  </map>
</body>
</html>

Output

An image of a mountain with three clickable areas: a rectangle on the left, a circle in the middle, and a polygon on the right. Clicking each area opens a Wikipedia page about mountains.

⚠️

Common Pitfalls

Forgetting to add the # before the map name in the usemap attribute (e.g., usemap="#mapname").
Coordinates not matching the image size, causing clickable areas to be misplaced.
Not providing alt text for accessibility.
Using incorrect shapes or malformed coordinates.

Always test your image map on different screen sizes to ensure clickable areas align correctly.

html

<!-- Wrong: missing # in usemap -->
<img src="image.jpg" usemap="mapname" alt="Image">

<!-- Correct: includes # -->
<img src="image.jpg" usemap="#mapname" alt="Image">

📊

Quick Reference

Use this quick guide to remember key attributes:

Attribute	Description	Example
`usemap`	Links image to map by name with #	`usemap="#mapname"`
`name`	Name of the map referenced by image	`<map name="mapname">`
`shape`	Shape of clickable area: rect, circle, poly	`shape="rect"`
`coords`	Coordinates defining the area shape	`coords="34,44,270,350"`
`href`	Link URL when area is clicked	`href="https://example.com"`
`alt`	Alternative text for accessibility	`alt="Description"`

✅

Key Takeaways

Use <map> and <area> tags to define clickable regions on an image.

Connect the image to the map using the usemap="#mapname" attribute on the <img> tag.

Specify shapes with shape and coordinates with coords for each clickable area.

Always include alt text on <area> tags for accessibility.

Check coordinates carefully and test on different screen sizes to ensure clickable areas align correctly.