HTML Image Map

An HTML image map lets you define clickable areas on an image. Each area can link to a different URL — like a map where different regions lead to different pages.

---

How Image Maps Work

An image map requires three things:

1. An <img> tag with a usemap attribute pointing to the map name
2. A <map> tag with a matching name attribute
3. One or more <area> tags defining each clickable region

---

Basic Syntax

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
    <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.php">
    <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.php">
    <area shape="circle" coords="337,300,44" alt="Cup" href="coffee.php">
</map>

---

The <area> Tag Attributes

Attribute	Description
shape	Shape of the clickable area: rect, circle, or poly
coords	Coordinates that define the shape (pixel values)
href	URL to navigate to when area is clicked
alt	Alternative text for the area (required for accessibility)
target	Where to open the link (_blank, _self, etc.)

---

Shape Types

1. Rectangle — shape="rect"

Coordinates: x1,y1,x2,y2 — top-left corner and bottom-right corner:

<area shape="rect" coords="0,0,200,100" href="page.php" alt="Rectangle area">

2. Circle — shape="circle"

Coordinates: cx,cy,radius — center point and radius:

<area shape="circle" coords="150,150,80" href="page.php" alt="Circle area">

3. Polygon — shape="poly"

Coordinates: pairs of x,y points defining the polygon vertices:

<area shape="poly"
      coords="140,121,181,116,204,160,
              204,222,191,270,140,329,
              85,329,72,270,72,222,
              89,160,114,116"
      href="page.php"
      alt="Polygon area">

---

Full Working Example

A simple image map with coloured boxes demonstrating three clickable regions:

<img src="planets.jpg" alt="Planets"
     usemap="#planetmap" width="600" height="300">

<map name="planetmap">
    <area shape="circle" coords="90,58,30"
          href="mercury.php" alt="Mercury">
    <area shape="circle" coords="200,90,40"
          href="venus.php" alt="Venus">
    <area shape="circle" coords="380,130,60"
          href="earth.php" alt="Earth">
</map>

---

Quick Reference

Shape	Coords Format	Example
rect	x1,y1,x2,y2	coords="0,0,100,50"
circle	cx,cy,radius	coords="100,100,50"
poly	x1,y1,x2,y2,...	coords="10,10,50,0,90,10"