<area> ... </area>
Available in versions: 3.2, 4.0
 
The <area> tag is used (along with the <map> tag) to create a client-side image map which is divided into two or more mouse-sensitive regions. When you click on a region in the map, an attribute contained in the area tag can direct an action to occur. For example, a hyperlink can be created in each region using the href attribute. When you click onto a region, the hyperlink will send you to a target page just like any link. Also, since the map is mouse-sensitive, you could also use any of the onmouse core attributes to capture a mouse event.
 
The area tag must be contained inside the map element. The closing tag is mandatory.
 
Core Attributes
 
class    dir    id    lang    onclick    ondblclick    onkeydown    onkeypress    onkeyup    onmousedown    onmousemove    onmouseout    onmouseover    onmouseup    style    title
 
Attributes
 
accesskey
The accesskey attribute allows you to designate a key on the keyboard that when pressed, along with the alt or meta key, activates a link in a region of the image map. This attribute is poorly supported.
 
alt
The alt attribute allows you to associate a text message with each individual region of the map. When the mouse passes over the region, a small window will display the text. 
 
coords
The coords attribute defines the (x,y) coordinates of each shape in the image map. The coordinates are the x and y offset in pixels from the upper left corner (0,0) of the image. The number of coordinates you need to provide depends of the shape specified by the shape attribute.
 
href
The href attribute is the URL address for the link. Each area tag in the image map can have a link.
 
nohref
The nohref attribute specifies that the region defined by the area tag cannot be a link.
 
onblur
The onblur attribute is an event that allows a JavaScript code to execute when an element loses focus (for example, the mouse was clicked onto another element or a tab navigation directed the cursor elsewhere).
 
onfocus
The onfocus attribute is an event that allows a JavaScript code to execute when an element comes into focus (for example, the mouse was clicked onto the element or a tab navigation brought the cursor to the element).
 
shape
The shape attribute defines the geometric shape of the image map. It can be a circle (circle or circ), polygon (polygon or poly), or a rectangle (rectangle or rect)
 
tabindex
The tabindex attribute specifies an integer that defines the rank in the tabbing order for the specified element when you use the keyboard to navigate (tab through) a page. This attribute is poorly supported.
 
target
The target attribute specifies the name of the frame or window in which the target page should appear when a link is clicked. The four reserved names are _blank, _parent, _self, and _top.
 
The area and map tags are used on the DevGuru site to create image mapped links for the indexes to the various Quick References. For example, this is the code used for the ASP Quick Reference. These links are active and will take you to the ASP indexes.
 
Code:
<img border="0" src="/technologies/asp/quickref/images/method_event_property.gif" usemap="#methodproperty">
<br>
<map name="methodproperty">
<area shape="rect" coords="192,0,248,26" href="/technologies/asp/quickref/properties.html">
<area shape="rect" coords="133,0,191,26" href="/technologies/asp/quickref/collections.html">
<area shape="rect" coords="90,0,134,22" href="/technologies/asp/quickref/events.html">
<area shape="rect" coords="43,0,89,22" href="/technologies/asp/quickref/methods.html">
</map>
 
Output:


 

Copyright 2000 by Infinite Software Solutions, Inc.
Trademark Information