HTML <map> (Client-Side Image Map) Tag

<img src="desk.jpg" usemap="#image-map">

<map name="image-map">
  <area target="_blank" alt="Computer" title="Computer" href="computer.png" coords="112,31,285,246" shape="rect">
  <area target="_blank" alt="Cup" title="Cup" href="cup.png" coords="327,212,31" shape="circle">
  <area target="_blank" alt="Mobile" title="Mobile" href="mobile.png" coords="296,121,326,176" shape="rect">
  <area target="_blank" alt="Book" title="Book" href="book.png" coords="53,132,115,157,72,237,2,211" shape="poly">
</map>

Meaning

The <map> element is used to implement client-side image maps.

The element is used to define a map that associates locations on an image with a destination URL. Each hot spot or hyperlink mapping is defined by an enclosed area element. A map is bound to a particular image through the use of the usemap attribute in the <img> element, which is set to the name of the map.

Note: When the name attribute is used, it should be the same as the id attribute(it must be unique).

Version: HTML 3.2, 4, 4.01, 5

Standard Syntax

<img src="URL" alt="txt" usemap="#idName" width="px" height="px">

<map name="idName">
  <area shape="circle | default | poly | rect"" coords="coordinates" alt="txt" href="URL">
</map>

Browser Support

Status

Attributes

Global Attributes

<map> element also supports the Global Attributes in HTML.

Event Attributes

<map> element also supports the Event Attributes in HTML.

By Default CSS Value(s)

Most of the browsers will display the <map> element with the following by default value(s)

map {
  display: inline;
}