map element
If you don't know what an element is or how you must use it, I recommend you read the "HTML tags and attributes" tutorial that you can find in the HTML tutorials section.
Table of contents
Description
The map element, together with img and area, creates an image map. Image maps allow authors to define sections in an image and, optionally, convert them into hyperlinks pointing to other resources. In other words, image maps make it possible to create a link out of one or more sections of the image (img) they're associated with.
To correctly associate an image to a map, the value of the usemap attribute in the image must match the value of the name attribute in the map preceded by a hash sign ("#").
The areas present in an image map are declared using the area element, which can define different types of shapes (circles, rectangles, polygons and the entire area of the image). area elements must be declared as children of map.
In previous versions of the standard, authors could also define image map areas with the a element. In HTML5 only the area element provides this functionality.
Examples
In the example below, we'll create an image map and we'll associate it to the image. Inside of it, we'll insert two areas (area), one circular and the other rectangular, that will cover the elements we see in the image (a circle and a pice of text). This will allow the user to follow the link by clicking only the desired areas of the image, and not in the entire image.
Next to this text, you'll also find an image with the schematics of the areas that will be specified in the following example. They appear visible in this image for better understanding.
<map name="image-map-1">
<area href="../../tutorials.html" alt="HTML tutorials" shape="circle" coords="67,73,47">
<area href="../../tutorials.html" alt="HTML tutorials" shape="rect" coords="82,78,156,99">
</map>
<img src="/assets/images/image-map-1-en.png" usemap="#image-map-1" alt="Example image map">
A couple of things to note in this example: first, the values in the shape and coords attributes of the area elements are describing exactly the needed areas; and second, the values of the name attribute in the map and the usemap attribute in the image, matching (except for the required hash sign).
Attributes
Specific attributes
name
A name allowing the map to be referenced by an image (img). Images will get associated to this image map when the value of their usemap attribute matches the value of this attribute preceded by the hash sign ("#").
The presence of this attribute in the map element is mandatorty and its value must be a non-empty string with no space characters.
There can't be more than one map with the same value in the name attribute. If the id attribute is also specified, its value must match the value of name.
Example
<map name="the-azores-map">
<area href="santa-maria.html" alt="Santa Maria island" shape="circle" coords="500,300,40">
</map>
<img src="the-azores.jpg" usemap="#the-zores-map" alt="Map of the Azores">
Global attributes
For information about global attributes refer to this list of global attributes in HTML5.
Events
Global events
For information about global events refer to this list of global events in HTML5.