HTML Image Maps
An image map lets you create clickable areas on a single image. Each area acts as a separate link. One image can have many clickable zones, each leading to a different page or action. Think of a floor map in a shopping mall — tapping any store on the map takes you to that store's page.
How Image Maps Work
A standard image is one big clickable block — clicking anywhere on it goes to one link. An image map divides the same image into multiple regions. Each region has its own shape and its own link.
Visual Diagram — Standard Image vs Image Map
Standard image (one click zone): +----------------------------+ | | | Clicking anywhere here | --→ One link | | +----------------------------+ Image map (multiple click zones): +----------------------------+ | Zone A | Zone B | | → Link1 | → Link2 | |----------| | | Zone C | Zone D | | → Link3 | → Link4 | +----------------------------+
The Three Tags You Need
1. The img Tag with usemap Attribute
The image still uses the regular <img> tag, but you add the usemap attribute. The value must start with a hash symbol and match the name of your map.
<img src="world-map.jpg" alt="World Map" usemap="#worldmap">
2. The map Tag
The <map> tag defines the map. Its name attribute must match the usemap value on the image (without the hash).
<map name="worldmap"> ... area tags go here ... </map>
3. The area Tag
Each <area> tag defines one clickable region. The tag is self-closing — it has no content inside. You set its shape, coordinates, link, and alt text.
<area shape="rect" coords="0,0,200,150" href="europe.html" alt="Europe">
Area Shapes
Every clickable region on an image map must have a shape. HTML supports three shapes.
Rectangle — shape="rect"
A rectangular region needs four coordinate values: the x and y position of the top-left corner, then the x and y position of the bottom-right corner.
Visual Diagram — Rectangle Coordinates
Image origin (0,0) is top-left corner
0,0 -------- 200,0
| |
| RECT ZONE |
| |
0,100 ------ 200,100
coords="0,0,200,100"
^ ^ ^ ^
x1 y1 x2 y2
<area shape="rect" coords="0,0,200,100" href="page.html" alt="Zone">
Circle — shape="circle"
A circular region needs three values: the x center, the y center, and the radius in pixels.
Visual Diagram — Circle Coordinates
center point: (150, 100)
radius: 50 pixels
(150,50)
___
/ \
(100,100) + (200,100) center = (150,100)
\ ___ /
(150,150)
coords="150,100,50"
^ ^ ^
cx cy radius
<area shape="circle" coords="150,100,50" href="circle-page.html" alt="Circle Zone">
Polygon — shape="poly"
A polygon lets you trace any irregular shape. You list pairs of x,y coordinates for each corner of the shape. The browser connects the dots in order and closes the shape automatically.
Visual Diagram — Polygon Coordinates
Tracing a triangle:
Point A: (100,10)
Point B: (200,190)
Point C: (10,190)
(100,10)
/\
/ \
/ \
(10,190)---(200,190)
coords="100,10,200,190,10,190"
<area shape="poly" coords="100,10,200,190,10,190" href="triangle.html" alt="Triangle">
Default — shape="default"
The default shape covers the entire image. It acts as a fallback link — if the user clicks anywhere outside defined zones, they land on this link. Use it when you want every part of the image to be clickable.
<area shape="default" href="main.html" alt="Go to main page">
Complete Image Map Example
Here is a complete image map for a simple layout — imagine a banner image divided into three sections: Home, Products, and Contact.
<img src="banner.jpg" alt="Site Navigation Banner" usemap="#navmap" width="600" height="100"> <map name="navmap"> <area shape="rect" coords="0,0,200,100" href="index.html" alt="Home"> <area shape="rect" coords="200,0,400,100" href="products.html" alt="Products"> <area shape="rect" coords="400,0,600,100" href="contact.html" alt="Contact"> </map>
Visual Diagram — The Three Zones
+------------------+------------------+------------------+ | | | | | HOME | PRODUCTS | CONTACT | | (0,0)→(200,100) | (200,0)→(400,100)| (400,0)→(600,100)| | | | | +------------------+------------------+------------------+
How to Find Coordinates
Finding exact pixel coordinates by guessing is difficult. Use these methods instead:
Image editing software — Open the image in any photo editor. Hover your mouse over the corners of the region you want. The software shows the x,y coordinates of your cursor.
Browser developer tools — Load the image in a browser. Open the developer tools and use the inspector to hover over the image. Most browsers show cursor coordinates relative to the image.
Online image map generators — Several free websites let you upload an image, draw shapes on it, and automatically generate the coordinates and HTML code.
Accessibility Requirements
Every <area> tag must have an alt attribute. Screen readers use this text to describe the clickable zone to users who cannot see the image. Without alt text, the image map is inaccessible.
<area shape="rect" coords="0,0,200,100" href="home.html" alt="Go to Home page">
The parent <img> tag also needs a descriptive alt attribute that describes the overall image.
When to Use Image Maps
Image maps work best for geographic maps, floor plans, diagrams, and infographics where clicking different parts should go to different pages. Avoid using image maps for simple navigation menus — CSS-styled button links are easier to maintain and work better on mobile devices.
Mobile Considerations
Image maps use fixed pixel coordinates. When an image scales down on a small phone screen, the coordinate zones do not scale with it. A zone that covered the correct area on a desktop may land in the wrong spot on a phone.
To handle this, set a fixed width and height on the image with the width and height attributes so the image always displays at the size your coordinates were designed for. For fully responsive image maps, JavaScript libraries are available that recalculate coordinates when the image resizes.