<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.
<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>
<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.
<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.
<map> - creates an image map
<area> - sets the clickable area using coordinates inside an image map
This table lists the
<map> tag attributes.
|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.
<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.
|<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|
|<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: