The <map> tag specifies an image map.
An image map is a collection of one or more clickable areas.
The clickable areas are then superimposed onto an image.
In this example, <map> defines three clickable areas: France, Germany, and UK.
These areas 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>
The <map> defines a collection of clickable areas.
These areas are then linked and overlayed onto an <img> element.
The usemap attribute is used to link the <img> to the named <map>.
This <map> divides the image in three areas: monitor, keyboard, and mouse.
Clicking the image opens a alert box with the name of the clicked area.
<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>
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
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.
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, they 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 |
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 |
