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

❮ Previous Reference Next ❯


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


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

Browser Support



Attribute Value Description
name idName Gives the map a name so that it can be referenced.

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;

Related Tags:

<audio>, <embed>, <iframe>, <img>, <object>, <param>, <picture>, <portal>, <source>, <track> and <video>
❮ Previous Reference Next ❯