<map>

Definition and Usage

The <map> tag is used to define an image map. An image map is an image with clickable areas.

The name attribute of the <map> tag is associated with the <img>'s usemap attribute and creates a relationship between the image and the map.

The <map> element contains a number of <area> elements that define the clickable areas in the image map.

Attributes

The <map> tag also supports the Global Attributes in HTML.

The <map> tag also supports the Event Attributes in HTML.

Examples

Basic Image Map

Create a simple image map with clickable areas:

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

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" href="computer.html" alt="Computer" />
  <area shape="circle" coords="337,300,44" href="phone.html" alt="Phone" />
</map>

Rectangular Areas

Use rectangular shapes to define clickable regions:

<img
  src="office.jpg"
  alt="Office Layout"
  usemap="#officemap"
  width="600"
  height="400"
/>

<map name="officemap">
  <area shape="rect" coords="0,0,200,200" href="reception.html" alt="Reception Area" />
  <area shape="rect" coords="200,0,400,200" href="meeting.html" alt="Meeting Room" />
  <area shape="rect" coords="400,0,600,200" href="office1.html" alt="Office 1" />
  <area shape="rect" coords="0,200,200,400" href="office2.html" alt="Office 2" />
  <area
    shape="rect"
    coords="200,200,600,400"
    href="workspace.html"
    alt="Open Workspace"
  />
</map>

Circular Areas

Define circular clickable regions using the circle shape:

<img
  src="planets.jpg"
  alt="Solar System"
  usemap="#planetsmap"
  width="800"
  height="400"
/>

<map name="planetsmap">
  <area shape="circle" coords="100,200,30" href="mercury.html" alt="Mercury" />
  <area shape="circle" coords="200,200,45" href="venus.html" alt="Venus" />
  <area shape="circle" coords="320,200,50" href="earth.html" alt="Earth" />
  <area shape="circle" coords="450,200,40" href="mars.html" alt="Mars" />
  <area shape="circle" coords="600,200,80" href="jupiter.html" alt="Jupiter" />
</map>

Polygon Areas

Create complex shapes using polygon coordinates:

<img
  src="shapes.jpg"
  alt="Geometric Shapes"
  usemap="#shapesmap"
  width="500"
  height="500"
/>

<map name="shapesmap">
  <!-- Triangle -->
  <area
    shape="poly"
    coords="250,50,350,200,150,200"
    href="triangle.html"
    alt="Triangle"
  />

  <!-- Pentagon -->
  <area
    shape="poly"
    coords="250,250,350,280,330,380,170,380,150,280"
    href="pentagon.html"
    alt="Pentagon"
  />

  <!-- Irregular polygon -->
  <area
    shape="poly"
    coords="50,50,100,30,150,50,150,100,100,120,50,100"
    href="hexagon.html"
    alt="Hexagon"
  />
</map>

Complex Image Map

Combine different shapes in a single image map:

<img
  src="navigation.jpg"
  alt="Navigation Menu"
  usemap="#navmap"
  width="800"
  height="200"
/>

<map name="navmap">
  <!-- Rectangular buttons -->
  <area shape="rect" coords="10,50,150,150" href="home.html" alt="Home" />
  <area shape="rect" coords="170,50,310,150" href="about.html" alt="About" />
  <area shape="rect" coords="330,50,470,150" href="services.html" alt="Services" />
  <area shape="rect" coords="490,50,630,150" href="contact.html" alt="Contact" />

  <!-- Circular logo -->
  <area shape="circle" coords="730,100,60" href="index.html" alt="Company Logo" />
</map>

Image Map with Target

Open links in new windows or specific frames:

<img src="menu.jpg" alt="Interactive Menu" usemap="#menumap" width="600" height="400" />

<map name="menumap">
  <area
    shape="rect"
    coords="10,10,290,190"
    href="page1.html"
    target="_blank"
    alt="Open in New Tab"
  />
  <area
    shape="rect"
    coords="310,10,590,190"
    href="page2.html"
    target="_self"
    alt="Open in Same Tab"
  />
  <area
    shape="rect"
    coords="10,210,290,390"
    href="https://example.com"
    target="_blank"
    rel="noopener noreferrer"
    alt="External Link"
  />
  <area shape="rect" coords="310,210,590,390" href="page4.html" alt="Regular Link" />
</map>

How Image Maps Work

Image maps work through the coordination of three HTML elements:

1. <img>: The image element displays the image and uses the usemap attribute to reference the map
2. <map>: The map element contains the clickable areas and is identified by the name attribute
3. <area>: Area elements define the clickable regions using shape and coordinate attributes

Area Element Coordinate Systems

Understanding how coordinates work for different shapes:

• Rectangle (rect): coords="x1,y1,x2,y2" - Top-left corner (x1,y1) and bottom-right corner (x2,y2)
• Circle (circle): coords="x,y,radius" - Center point (x,y) and radius in pixels
• Polygon (poly): coords="x1,y1,x2,y2,x3,y3,..." - Series of x,y coordinates defining polygon vertices
• Default (default): No coordinates needed - covers the entire image area not covered by other areas

Try it Yourself

Best Practices

• Always use <area> elements: The <map> element must contain one or more <area> elements to be functional
• Add alt text: Always include descriptive alt attributes on <area> elements for accessibility
• Specify image dimensions: Use width and height attributes on the <img> element to ensure coordinates work correctly
• Consider responsive design: Image maps use fixed pixel coordinates, which can cause issues on different screen sizes
• Use modern alternatives: For responsive designs, consider using SVG with clickable elements or CSS-based solutions
• Test thoroughly: Test clickable areas across different browsers and devices
• Avoid overlapping areas: The first area defined takes precedence when areas overlap
• Include a default area: Use shape="default" for any unassigned portions of the image

Accessibility Considerations

• Always provide meaningful alt attributes for both the image and each area
• Ensure clickable areas are large enough to be easily tapped on touch devices (minimum 44x44 pixels)
• Test with screen readers to ensure all areas are properly announced
• Consider providing alternative navigation for keyboard-only users
• Ensure sufficient color contrast between clickable areas and the background

Default CSS Settings

Most browsers will display the <map> element with the following default values:

map {
  display: inline;
}

Related Tags

• <area>

  Defines clickable areas in image map

• <img>

  Defines an image

• <figure>

  Specifies self-contained content

• <a>

  Defines a hyperlink

• <canvas>

  Draws graphics via JavaScript