HTML allows you to create interactive images using the map tag. This tag is used in combination with <area> and <img usemap> to define clickable regions within an image — known as an image map.
📌 What Is the <map> Tag?
The <map> element defines a client-side image map, which means certain parts of an image can become clickable links or interactive zones.
It must be associated with an <img> tag using the usemap attribute.
📷 Visual Example 1: Basic Image Map
<img src="world-map.jpg" alt="World Map" usemap="#worldmap">
<map name="worldmap">
<area shape="rect" coords="34,44,270,350" href="https://example.com/usa" alt="USA">
<area shape="circle" coords="400,150,60" href="https://example.com/japan" alt="Japan">
</map>
🔍 Here’s what’s happening:
usemap="#worldmap"links the image to the map.<map name="worldmap">defines the clickable areas.<area>elements define the shape and location of clickable zones.
🧩 Structure Diagram
<img> ← image with usemap="#mapname"
└── <map name="mapname">
├── <area shape="rect" ...> ← rectangular clickable zone
└── <area shape="circle" ...> ← circular clickable zone
✨ Supported Shapes in <area>
| Shape | Description | Example coords |
|---|---|---|
rect | Rectangle | x1,y1,x2,y2 |
circle | Circle | center_x,center_y,radius |
poly | Polygon (multiple points) | x1,y1,x2,y2,x3,y3,... |
default | Entire image | no coords needed |
📷 Visual Example 2: Polygon Area
<area shape="poly"
coords="50,50, 100,100, 150,50"
href="https://example.com/triangle"
alt="Triangle Area">
🛠️ This creates a triangle-shaped clickable area.
✅ Benefits of <map> and <area>
| Advantage | Description |
|---|---|
| 🎯 Interactivity | Make parts of an image act as buttons or links |
| 📲 Lightweight | No JavaScript required |
| 🧭 Accessibility | Use alt attributes for screen readers |
🚫 Common Mistakes
| Mistake | Fix |
|---|---|
Forgetting usemap in <img> | Add usemap="#mapname" |
Using name without # in usemap | Always prefix with # |
Missing alt on <area> | Add alt for accessibility |
🧪 Bonus Tip: Responsive Image Maps
Standard image maps do not scale with image resizing. To make them responsive, you’ll need JavaScript or libraries like:
✅ Conclusion
The <map> tag allows you to create visually rich, interactive web pages without the need for JavaScript. While image maps are sometimes overlooked in modern development, they remain a powerful tool for clickable graphics, infographics, games, and custom UI solutions.