map element, together with
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.
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
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
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).
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
<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">
For information about global attributes refer to this list of global attributes in HTML5.
For information about global events refer to this list of global events in HTML5.