← Back to All Tags

<map>

Defines an image map with clickable areas

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.

Note: The name attribute is required for the <map> element to work properly. The value must match the usemap attribute on the associated <img> element.
Tip: Image maps are useful for creating interactive images like floor plans, maps, or diagrams where different areas need to link to different destinations.

Browser Support

The <map> tag is supported in all major browsers:

Chrome
Chrome
Yes
Firefox
Firefox
Yes
Safari
Safari
Yes
Edge
Edge
Yes
Opera
Opera
Yes

Attributes

Attribute Value Description
name mapname Required. Specifies the name of the image map. Must match the usemap attribute of the <img> element

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:

Example

<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:

Example

<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:

Example

<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:

Example

<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:

Example

<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:

Example

<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
Connection: The usemap attribute on the <img> element must start with a hash symbol (#) followed by the exact name specified in the <map> element's name attribute.

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
Tool Tip: Use image editing software or online image map generators to easily determine the coordinates for your clickable areas.

Try it Yourself

Interactive Example

Here's a simple demonstration of how an image map works:

Area 1 Area 2

Each colored area can link to a different page

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
Responsive Considerations: Traditional image maps don't scale well on responsive websites. Consider using JavaScript libraries or SVG-based solutions for better mobile support.

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:

Default CSS

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