Home / HTML / Images / Image Map

HTML Image Map

What is an Image Map?

An image map allows you to define clickable regions (areas) within an image. Each region can link to different URLs. This is useful for maps, diagrams, or any image where you want different parts to link to different destinations.

Image Map Syntax

Image maps are created using the <map> and <area> elements:

Syntax

<img src="image.jpg" usemap="#mapname" alt="Description">
<map name="mapname">
    <area shape="rect" coords="x1,y1,x2,y2" href="url" alt="Area description">
    <area shape="circle" coords="x,y,radius" href="url" alt="Area description">
    <area shape="poly" coords="x1,y1,x2,y2,x3,y3,..." href="url" alt="Area description">
</map>

Map Element

The <map> element defines an image map. It must have a name attribute that matches the usemap attribute in the <img> tag (without the #):

Example

<img src="planets.jpg" usemap="#planetmap" alt="Planets">
<map name="planetmap">
    <!-- area elements here -->
</map>

Area Element Shapes

The <area> element defines a clickable area. It supports three shapes:

1. Rectangle (rect)

Defines a rectangular area. Coordinates: x1,y1,x2,y2 (top-left and bottom-right corners):

Example

<img src="rectangle.jpg" usemap="#rectmap" alt="Rectangle">
<map name="rectmap">
    <area shape="rect" coords="0,0,100,100" href="page1.html" alt="Top-left area">
    <area shape="rect" coords="100,0,200,100" href="page2.html" alt="Top-right area">
</map>

2. Circle (circle)

Defines a circular area. Coordinates: x,y,radius (center point and radius):

Example

<img src="circle.jpg" usemap="#circlemap" alt="Circle">
<map name="circlemap">
    <area shape="circle" coords="100,100,50" href="center.html" alt="Center circle">
    <area shape="circle" coords="200,200,30" href="another.html" alt="Another circle">
</map>

3. Polygon (poly)

Defines a polygon area. Coordinates: x1,y1,x2,y2,x3,y3,... (all corner points):

Example

<img src="polygon.jpg" usemap="#polymap" alt="Polygon">
<map name="polymap">
    <area shape="poly" coords="0,0,100,0,100,100,0,100" href="square.html" alt="Square area">
    <area shape="poly" coords="50,0,100,50,50,100,0,50" href="diamond.html" alt="Diamond area">
</map>

Complete Example

Here's a complete example with multiple clickable areas:

Example

<img src="computer.jpg" usemap="#computermap" alt="Computer parts">
<map name="computermap">
    <area shape="rect" coords="10,10,200,150" href="monitor.html" alt="Monitor">
    <area shape="rect" coords="10,160,200,200" href="keyboard.html" alt="Keyboard">
    <area shape="circle" coords="300,100,50" href="mouse.html" alt="Mouse">
</map>

Default Area

You can make the entire image clickable by not specifying coordinates, or create a default area that covers the whole image:

Example

<img src="image.jpg" usemap="#defaultmap" alt="Default area">
<map name="defaultmap">
    <area shape="default" href="default.html" alt="Default link">
</map>

Area Attributes

The <area> element supports these attributes:

shape: rect, circle, poly, or default
coords: Coordinates defining the area (format depends on shape)
href: URL to link to when area is clicked
alt: Alternative text for the area (required for accessibility)
target: Where to open the link (_blank, _self, etc.)
rel: Relationship between the current document and the linked resource

Finding Coordinates

To find the coordinates for your image map, you can:

Use image editing software: Tools like Photoshop or GIMP show coordinates
Use online tools: Image map generators available online
Use browser dev tools: Inspect the image to find coordinates
Calculate manually: Use pixel values from 0,0 (top-left corner)

Accessibility

Always include the alt attribute for each <area> element to make image maps accessible:

Example

<map name="accessiblemap">
    <area shape="rect" coords="0,0,100,100" href="page1.html" alt="Go to page 1">
    <area shape="rect" coords="100,0,200,100" href="page2.html" alt="Go to page 2">
</map>

Best Practices

Use descriptive alt text: Always provide meaningful alt text for each area
Consider responsive design: Image maps may not work well on responsive sites
Test coordinates: Always test your coordinates to ensure they match the image
Use CSS alternatives when possible: CSS can sometimes provide better responsive solutions
Keep areas simple: Complex polygons can be hard to maintain

Limitations

Not responsive: Image maps use fixed pixel coordinates, which don't scale well
Hard to maintain: Coordinates need to be updated if the image changes
Accessibility concerns: Screen readers may have difficulty with image maps

← HTML Images Background Images →