area (HTML element)
| Depr. | Empty | Version |
|---|---|---|
| No | Yes | HTML 3.2 |
| IE5.5+ | FF1+ | Saf1.3+ | Op9.2+ |
|---|---|---|---|
| Full | Full | Full | Full |
Example
This code identifies
one area element within an image
map:
<map name="bigthings" id="bigthings">
<area shape="rect" coords="35,4,205,108"
href="http://en.wikipedia.org/wiki/Australia's_Big_Things"
alt="Australia's Big Things (on Wikipedia)"/>
⋮
</map>
<p><img src="giant-prawn.jpg" alt="The Giant Prawn at Ballina"
border="0" usemap="#bigthings"/></p>
- Type
- inline element
- Contains
- nothing
- Contained by
mapelement only
Description
We use
the area element to define each hotspot that’s
clickable or actionable and will act as a link within a client-side image
map . The behavior of a hotspot is similar to a normal
link (the a element) in that it can
be activated with a mouse click or the keyboard, and it’s used to link to
another web page or resource; it’s also similar to the image element
because, as it defines a specific area of a larger image, it requires us
to set an alt attribute for
those using non-visual browsers.
The hit, or actionable, area of the image is defined using a combination of the shape and coords attributes, which create the hit area boundaries as a sequence of x,y coordinate pairings.
Use This For …
This element is used to create clickable or actionable areas on an image. For example, you might use it to create a graphically rich navigation mechanism such as a map on which the different countries or regions are the clickable areas.
Note that not every area needs to be
actionable. It’s perfectly acceptable to use area
without an href attribute for the purposes
of outlining a given area, and for providing additional help in the form
of a tooltip created using the title attribute. However,
this technique is inaccessible to people who use anything other than a
mouse to navigate the web page, since there will be no mouse hover event
for those users—the usual trigger for the tooltip
display.
Compatibility
| IE | 5.5 | Full |
|---|---|---|
| 6.0 | Full | |
| 7.0 | Full | |
| Firefox | 1.0 | Full |
| 1.5 | Full | |
| 2.0 | Full | |
| Safari | 1.3 | Full |
| 2.0 | Full | |
| 3.0 | Full | |
| Opera | 9.2 | Full |
| 9.5 | Full |
It causes no compatibility issues, and has excellent support across all tested browsers.
In this Section
- accesskey
assigns a key to trigger the activation of the link for thisarea - alt
specifies alternative text for the section of the image defined by thisarea - coords
specifies x and y coordinates that define the boundaries of anarea - href
defines the destination of the link - nohref
indicates that thisareadoesn’t require anhrefattribute - shape
identifies the shape of thearea’s hotspot - tabindex
indicates the order in the logical tabbing sequence for the link in thisarea - target
defines theframe(in frameset-based designs) that will display the linked page specified in thehref
Related Reading
User-contributed notes
There are no comments yet.
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.
