HTML <map> Tag

The <map> tag specifies an image map which is a collection of one or more clickable areas. When a map is associated with an image, the clickable areas are superimposed onto the image.

HTML Tag

Example

#

A <map> tag which defines 3 clickable areas (France, Germany, and UK) that are overlayed onto the image (which is a map of Europe).

<img src="/img/html/europe.jpg" usemap="#euromap">

<map name="euromap">
  <area shape="poly" coords="18,222,74,33,48,28,103,80" alt="France">
  <area shape="poly" coords="465,278,33,9,3,202,88,11" alt="Germany">
  <area shape="poly" coords="49,21,55,201,219,8,12,209" alt="UK">
</map>

Using <map>

The <map> element specifies an 'image map' which is a collection of clickable areas.

This element is linked to an <img> element and the areas are overlayed onto the image.

The usemap attribute is used to link the <img> to the named <map>.

More Examples

A <map> that divides an image in 3 areas: monitor, keyboard, and mouse.
Clicking the image opens a alert box with the name of the area that was clicked.

Computer Computer Keyboard Mouse
<img src="/img/html/computer-map.png" alt="Computer" usemap="#computermap">

<map name="computermap">
  <area shape="rect" coords="253,142,16,2" alt="Computer" href="javascript:alert('Computer screen was clicked');">
  <area shape="rect" coords="262,218,0,156" alt="Keyboard" href="javascript:alert('Computer keyboard was clicked');">
  <area shape="circle" coords="267,234,22" alt="Mouse" href="javascript:alert('Computer mouse was clicked');">
</map>

Code Explanation

usemap - specifies the image map name to be used

<map> - creates an image map

<area> - sets the clickable area using coordinates inside an image map


Attributes for <map>

This table lists the <map> tag attributes.

Attribute Value Description
name mapname Name of the image-map. This value is required.
id    identifier Defines a unique identifier for the map.

For additional global attributes see our global attributes list.


Media Tags

The <map> tag is part of a group of tags that create multi-media experiences on the web. This group is referred to as the Media tag group. Together, these tags allow you to create powerful multi-media solutions.

A list of media tags.

Element Description
<audio> Creates a player for sound such as music, sound effects, or others
<video> Creates a video player on a page
<source> Adds a media source for a <video>, <audio>, or <picture>
<track> Adds a text track, such as, subtitles and captions, to the media
<embed> Creates a container for an external resource
<iframe> Creates a frame in which another web page can be embedded
<svg> Displays an scalable vector image
<canvas> Creates a graphics container where JavaScript can draw
<img> Displays an image
<area> Specifies a map area for an image
<map> Defines a client-side image map, i.e. an image with clickable areas
<figure> Displays self-contained content, usually an image
<figcaption> Adds a caption to a <figure> (image) element

Browser support for the <map> tag

Here is when <map> support started for each browser:

Chrome
1.0 Sep 2008
Firefox
1.0 Sep 2002
IE/Edge
1.0 Aug 1995
Opera
1.0 Jan 2006
Safari
1.0 Jan 2003

You may also like

Guides