Support in all current engines.
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
name attribute must not be equal to the value of the
name attribute of another
map element in the same
tree. If the
id attribute is also specified, both
attributes must have the same value.
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 >
Support in all current engines.
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 filename 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
alt attribute may be left blank if there is another
area 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.
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, may be associated with an image map (in
the form of a
map element) by specifying a
usemap attribute on the
img 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 >