Description

The HTML element <map> is used to define an image map with multiple clickable areas on the same image.

It contains multiple <area> elements that define the share and coordinates of each clickable area.

It can best be explained using a world map as a single image and each country is made a clickable link using the <map> element.

The below table summarizes its usage.

Usage Details
Parent Elements <body>
Placement It is displayed as an Inline element.
Contents It can contain any number of <area> elements.
Tags Both the opening and closing tags are required.
Versions HTML 3.2, 4, 4.01, 5

Syntax

Here is the basic syntax of the <map> element.

<map name="map-name">...</map>

Examples

The element <map> is used to link an external CSS style sheet.

Run this on IDE

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example for HTML Image map</title>
    <link rel="stylesheet" href="/assets/css/default.css">
</head>
<body>
    <h1>Image with shapes - Click on a shape to see how it works.</h1>
    <img src="https://randomcodez.com/assets/images/shapes.png" alt="Geometrical Shapes" usemap="#shapes">
    <map name="shapes">
        <area shape="circle" coords="40,40,40" href="https://randomcodez.com/assets/circle.html" alt="Circle">
        <area shape="poly" coords="148,2,104,80,193,80" href="https://randomcodez.com/assets/triangle.html" alt="Triangle">
        <area shape="rect" coords="226,2,323,80" href="https://randomcodez.com/assets/rectangle.html" alt="Rectangle">
        <area shape="poly" coords="392,2,352,32,366,80,418,80,432,32" href="https://randomcodez.com/assets/pentagon.html" alt="Pentagon">
    </map>
</body>
</html>

Attributes

The following table shows the list of supported and unsupported attributes for the <map> element.

Attribute Type Details
Element-Specific Attributes The tags <map> has some element-specific attributes listed in the below table.
Global Attributes Like all other HTML tags, the tag <map> supports the HTML Global Attributes.
Event Attributes The tags <map> also supports the HTML Event Attributes.

Here is a list of attributes that are specific to the <map> element.

Attribute Value Description
name map-name Specifies map name.

Browser Compatibility

The tags <map> is supported in all modern browsers.

  • Google Chrome 1+
  • Internet Explorer or Edge 2+
  • Firefox 1+
  • Apple Safari 1+
  • Opera 4+

Related Links