Webpage Workshop: Home » HTML language reference » Image map area

Image map area

This element is used in combination with an image map, and is used to declare which parts of the image are to be used as links.

<area
    accesskey="key"
    alt="text"
    class="class name(s)"
    coords="comma separated numbers"
    dir="ltr | rtl"
    href="url"
    id="unique identifier"
    lang="language code"
    nohref
    shape="default | circle | poly | rect"
    style="style information"
    tabindex="number"
    target="_blank | frame-name | _parent | _self | _top"**
    title="text"
>

Key:
‡ = Required attribute
** = Transitional only

Explanation of attributes

accesskey: used to define a key on the keyboard that can be used to select this element. This generally depends on the browser and operating system being used.

alt‡: this attribute is used to define an alternative text to display when the element is not supported. It should be noted that this is an alternative to the element and should not be simply a description of it; it is intended to replace the element, not compliment it.

class: used to state which class(es) the element belongs to. It is possible to indicate more than one class for an element by separating each class name with a space character. This attribute is normally used in combination with a stylesheet in order to associate the elements with particular styles defined within the stylesheet.

coords: used to define the coordinates of a object on the page. This takes the form of a comma separated list of numbers.

dir: used to set the direction of the text in combination with the language set in the lang attribute. The available values are "ltr" (left to right) and "rtl" (right to left), with the default value being "ltr".

href‡: used to define the URL that a hyperlink points to. This is the only required attribute of the anchor element when used as a hyperlink. It can refer to either a URL or a URL fragment; a name preceeded by the hash symbol (#).

id: used to specify a unique alphanumeric identifier to the element. This is usually used in combination with stylesheets in order to apply a style to one particular instance of an element. Only one element, regardless of type, can be given a particular id.

lang: used to indicate the language being used in the text contained within the element. The value of this attribute takes on the form of the ISO standard lanuage abbreviations found in RFC 3066. A list of these codes can be found on the ISO language codes page.

nohref‡ if the element is not used as a hyperlink, then this attribute must be present instead of the href attribute.

shape: used to define the selectable region of the hyperlink in order to create an image map. This attribute is used in combination with the coords attribute. The exact format of the coords values depends on the value of this attrbute. For "rect" the values are x,y,w,h where x and y are the coordinates of the top-left corner, whereas w and h are used for the width and the height in pixels. For circle, the values take on the form x,y,r where x and y are the coordinates of the center of the circle, and the r value is the radius in pixels. For "poly" the values are x1,y1,x2,y2,... where each pair of x and y values represent one coordinate in the polygon. Each coordinate is joined to the next by a straight line, with the final being joined to the first.

style: used to specify an inline style to apply to the element. The styles defined here override the styles declared in the header section.

tabindex: used to define the elements position in the tabbing order of the document. This attribute contains a number, which a traversed in order by using the TAB key.

target**: used to specify the target window for the linked resource. Some of the values for this attribute are special in that they refer to specific frames, such as _blank (a new window), _parent (the parent frame), _self (the frame containing the link), and _top (the full browser window). Other values are used to target frames by the name defined in the frame element.

title: used to define an advisory text that may be displayed as a tooltip when a mouse is used to hover over the element.

Event handlers

The following event handlers are defined for this element:

Basic example

<map name="example">
  <area shape="circle" coords="150,150,25" href="test.html">
</map>

The above code would make an image map with an area defined as a link to "test.html". This circular area would be centered over the coordinates x150,y150 and would be 25 pixels in radius.

Compatibility

Description: Support of image-map area and attributes in various browsers
Test Internet Explorer 6+ Netscape 4 Mozilla and Netscape 6+ Opera 6+ MSN TV (WebTV) Konqeuror 3.0+
Basic element support  Yes  Yes  Yes  Yes  Yes  Yes 
Attribute: accesskey  Yes  No  No  No  No 
Attribute: alt  Yes  Yes  Yes  No  No 
Attribute: class  Yes  Yes  Yes  No 
Attribute: coords  Yes  Yes  Yes  Yes  Yes  Yes 
Attribute: dir  Yes  No  No  No  No  No 
Attribute: href  Yes  Yes  Yes  Yes  Yes  Yes 
Attribute: id  Yes  Yes  Yes  Yes  Yes  Yes 
Attribute: lang  Yes  No  No  No  No  No 
Attribute: nohref  Yes  Yes  Yes  Yes  No  Yes 
Attribute: shape  Yes  Yes  Yes  Yes  Yes  Yes 
Attribute: style  Yes  Yes  Yes  Yes  No  Yes 
Attribute: tabindex  Yes  Yes  Yes 
Attribute: target  Yes  Yes  Yes  Yes  Yes  Yes 
Attribute: title  Yes  No  Yes  Yes  No  Yes 

Key:
The browser icons are explained in the below list:
Internet Explorer 6+ = Microsoft Internet Explorer 6+
Netscape 4 = Netscape Communicator 4
Mozilla and Netscape 6+ = Mozilla and Netscape Navigator 6+
Opera 7+ = Opera 7+
MSN TV (WebTV) = MSN TV (aka. WebTV)
Konqeuror 3.0+ = Konqueror 3.0+