Skip to: content, navigation

by Ian Lloyd

usemap (HTML attribute)

Browser support full matrix
IE5.5+ FF1+ Saf1.3+ Op9.2+
Partial Partial Partial Partial
Spec
Depr. Version
No HTML 2
usemap="#map name"

Example

The usemap attribute below references a map named "sections":

<map name="sections">
  <area shape="circle" coords="70,84,51" href="/default.html"/>
  <area shape="rect" coords="25,180,125,280" href="/about.html"/>
  ⋮
</map>
  ⋮
<form>
  ⋮
  <input type="image" src="submit.jpg" alt="Submit your details"
      usemap="#sections"/>
</form>

Description

The usemap attribute, which is only applied to an input of type "image", allows the author to specify a different outcome depending on the area of the image that the user clicks on.

Value

A reference to the map’s name attribute takes the form of an # character followed by the "name" of the map:

usemap="#sections"

Compatibility

IE5.5Partial
6.0Partial
7.0Partial
Firefox1.0Partial
1.5Partial
2.0Partial
Safari1.3Partial
2.0Partial
3.0Partial
Opera9.2Partial

This element type isn’t particularly well supported and has limited practical value.

In all the browsers that were tested, clicking on the input image caused the form to submit, but with additional x and y coordinates appended to the form data, which suggests that the browsers were at least recognizing the notion that the image was being used as a map. Firefox and Opera were the only browsers that additionally honored the coordinates in the associated area element.

The HTML specifications regarding this attribute were vague as to its use, and its usage has been extremely limited. As such, it has been dropped from the HTML 5 draft.

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.

Related Products

The Principles of Beautiful Web Design

Best Seller!

You don’t need to go to Art School to design great looking web sites!

Book Cover: The Principles of Beautiful Web Design

Download the FREE sample chapters