map (HTML element)
| Depr. | Empty | Version |
|---|---|---|
| No | No | HTML 3.2 |
| IE5.5+ | FF1+ | Saf1.3+ | Op9.2+ |
|---|---|---|---|
| Full | Full | Full | Full |
Example
This code defines an
image map named
"bigthings":
<map name="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)"/>
<area shape="rect" coords="136,163,255,230"
href="http://vwkombi.com/" alt="The VW Kombi,
another Aussie icon"/>
</map>
- Type
- inline element
- Contains
- block-level
elements,
area - Contained by
- inline elements, block-level elements
Description
The
map element is a container for a number of area elements that define specific areas within
an image. The map has one required attribute, the name
attribute, which is associated with the image’s usemap
attribute to create a relationship between the image
and the map.
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.
Use This For …
This element is used to create specific clickable hotspots within a single larger image, and provides an alternative to the process whereby a larger image is sliced into smaller images, and numerous links are created using the a element.
In
the past, the map and area elements
have often been used to create navigation bars and the like. However, that
approach is used with decreasing frequency, as CSS support is excellent,
and in most cases provides a more suitable mechanism for creating
navigation blocks.
Other examples for the usage of the
map element include:
- identifying regions on a map, be they countries on a world map or areas on regional maps
- outlining locations in a floor plan—for example, a shopping mall or theme park
- creating an overlay for a photo whose different components or features need identification—for example, highlighting the parts of the inside of a laptop computer for the purposes of repair
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.
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.
