search
element with form functionality — Last Updated 1 December 2021map
elementSupport in all current engines.
name
— Name of image map to reference from the usemap
attributeHTMLMapElement
.The map
element, in conjunction with an img
element and any
area
element descendants, defines an image map. The element
represents its children.
The 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.
map.areas
Returns an HTMLCollection
of the area
elements in the
map
.
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 >
area
elementSupport in all current engines.
map
element ancestor.alt
— Replacement text for use when images are not availablecoords
— Coordinates for the shape to be created in an image mapshape
— The kind of shape to be created in an image maphref
— Address of the hyperlinktarget
— Browsing context for hyperlink navigationdownload
— Whether to download the resource instead of navigating to it, and its filename if soping
— URLs to pingrel
— Relationship between the location in the document containing the hyperlink and the destination resourcereferrerpolicy
— Referrer policy for fetches initiated by the elementhref
attribute: for authors; for implementers.HTMLAreaElement
.The 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.
An area
element with a parent node must have a map
element
ancestor.
If the area
element has an href
attribute, then the area
element represents a hyperlink. In this case,
the 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
area
element in the same image map that points to the same resource and
has a non-blank alt
attribute.
If the area
element has no href
attribute, then the area represented by the element cannot be selected, and the alt
attribute must be omitted.
In both cases, the shape
and coords
attributes specify the area.
The 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.
State | Keywords |
---|---|
Circle state | circle
|
Default state | default
|
Polygon state | poly
|
Rectangle state | rect
|
The attribute may be omitted. The missing value default and invalid value default are the rectangle state.
The coords
attribute
must, if specified, contain a valid list of floating-point numbers. This attribute
gives the coordinates for the shape described by the shape
attribute.
In the circle state,
area
elements must have a 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, area
elements must not have a coords
attribute. (The area is the whole image.)
In the polygon state,
area
elements must have a 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 order.
In the rectangle state,
area
elements 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.
The target
, download
, ping
,
rel
, and referrerpolicy
attributes must be omitted if the
href
attribute is not present.
If the 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 map
element.
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 >