name— Name of image map to reference from the
map element, in conjunction with an
img element and any
area element descendants, defines an image map. The element
represents its children.
name attribute gives the map a name so that
it can be referenced. The attribute must be present and must have a non-empty value
with no ASCII whitespace. The value of the
attribute must not be equal to the value of the
map element in the same tree. If the
id attribute is also specified, both attributes must have the same
HTMLCollection of the
area elements in the
Image maps can be defined in conjunction with other content on the page, to ease maintenance. This example is of a page with an image map at the top of the page and a corresponding set of text links at the bottom.
<!DOCTYPE HTML> < HTML LANG = "EN" > < TITLE >Babies™: Toys </ TITLE > < HEADER > < H1 >Toys </ H1 > < IMG SRC = "/images/menu.gif" ALT = "Babies™ navigation menu. Select a department to go to its page." USEMAP = "#NAV" > </ HEADER >... < FOOTER > < MAP NAME = "NAV" > < P > < A HREF = "/clothes/" >Clothes </ A > < AREA ALT = "Clothes" COORDS = "0,0,100,50" HREF = "/clothes/" >| < A HREF = "/toys/" >Toys </ A > < AREA ALT = "Toys" COORDS = "100,0,200,50" HREF = "/toys/" >| < A HREF = "/food/" >Food </ A > < AREA ALT = "Food" COORDS = "200,0,300,50" HREF = "/food/" >| < A HREF = "/books/" >Books </ A > < AREA ALT = "Books" COORDS = "300,0,400,50" HREF = "/books/" > </ P > </ MAP > </ FOOTER >
alt— Replacement text for use when images are not available
coords— Coordinates for the shape to be created in an image map
shape— The kind of shape to be created in an image map
href— Address of the hyperlink
target— Browsing context for hyperlink navigation
download— Whether to download the resource instead of navigating to it, and its file name if so
ping— URLs to ping
rel— Relationship between the location in the document containing the hyperlink and the destination resource
referrerpolicy— Referrer policy for fetches initiated by the element
hrefattribute: for authors; for implementers.
area element represents either a hyperlink with some text and a
corresponding area on an image map, or a dead area on an image map.
area element with a parent node must have a
area element has an
attribute, then the
area element represents a hyperlink. In this case,
alt attribute must be present. It specifies the
text of the hyperlink. Its value must be text that, when presented with the texts specified for
the other hyperlinks of the image map, and with the alternative text of the image,
but without the image itself, provides the user with the same kind of choice as the hyperlink
would when used without its text but with its shape applied to the image. The
alt attribute may be left blank if there is another
element in the same image map that points to the same resource and has a non-blank
area element has no
attribute, then the area represented by the element cannot be selected, and the
alt attribute must be omitted.
In both cases, the
coords attributes specify the area.
shape attribute is an enumerated
attribute. The following table lists the keywords defined for this attribute. The states
given in the first cell of the rows with keywords give the states to which those keywords map.
The attribute may be omitted. The missing value default and invalid value default are the rectangle state.
coords attribute must, if specified,
contain a valid list of floating-point numbers. This attribute gives the coordinates
for the shape described by the
In the circle state,
area elements must
coords attribute present, with three integers, the
last of which must be non-negative. The first integer must be the distance in CSS pixels from the left edge of the image to the center of the circle, the
second integer must be the distance in CSS pixels from the top edge of
the image to the center of the circle, and the third integer must be the radius of the circle,
again in CSS pixels.
In the default state state,
elements must not have a
coords attribute. (The area is the
In the polygon state,
area elements must
coords attribute with at least six integers, and the
number of integers must be even. Each pair of integers must represent a coordinate given as the
distances from the left and the top of the image in CSS pixels
respectively, and all the coordinates together must represent the points of the polygon, in
In the rectangle state,
must have a
coords attribute with exactly four integers,
the first of which must be less than the third, and the second of which must be less than the
fourth. The four points must represent, respectively, the distance from the left edge of the image
to the left side of the rectangle, the distance from the top edge to the top side, the distance
from the left edge to the right side, and the distance from the top edge to the bottom side, all
in CSS pixels.
referrerpolicy attributes must be omitted if the
href attribute is not present.
itemprop attribute is specified on an
area element, then the
href attribute must
also be specified.
An image map allows geometric areas on an image to be associated with hyperlinks.
An image, in the form of an
img element or an
representing an image, may be associated with an image map (in the form of a
element) by specifying a
usemap attribute on
object element. The
usemap attribute, if specified, must be a valid
hash-name reference to a
Consider an image that looks as follows:
If we wanted just the colored areas to be clickable, we could do it as follows:
< p >Please select a shape: < img src = "shapes.png" usemap = "#shapes" alt = "Four shapes are available: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star." > < map name = "shapes" > < area shape = rect coords = "50,50,100,100" > <!-- the hole in the red box --> < area shape = rect coords = "25,25,125,125" href = "red.html" alt = "Red box." > < area shape = circle coords = "200,75,50" href = "green.html" alt = "Green circle." > < area shape = poly coords = "325,25,262,125,388,125" href = "blue.html" alt = "Blue triangle." > < area shape = poly coords = "450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60" href = "yellow.html" alt = "Yellow star." > </ map > </ p >