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

It causes no compatibility issues, and has excellent support across all tested browsers.