HTML <area /> tagS2C Home   « HTML <area /> tag

Definition

The <area /> tag is a self closing tag used within the </map> </map> element to define the clickable areas.

Example


<map id="lesson3">
  <area shape="rect"
        alt="tomato"
        coords="0,0,12,15" 
        href="http://server2client.com/pages/tomato.html" />
</map>			 

Required Attributes

alt - specifies an alternate text for the map area.


<area alt="tomato" />

Optional Attributes

nohref - no browser support - use the href attribute instead.

target - not strict HTML/XHTML.

coords - specifies the coordinates of the area and should in conjunction with the shape attribute.


<area alt="tomato"
      shape="rect"
      coords="0,0,12,15" />

href - specifies the target URL to link to.


<area alt="tomato"
       href="http://server2client.com/pages/tomato.html" />

shape - specifies the shape of the area and should in conjunction with the coords attribute.


<!-- Valid values are rect, circle and poly, defaults to whole area. -->
<area alt="tomato"
      shape="rect"
      coords="0,0,12,15" />

Common Attributes

accesskey - specifies a keyboard shortcut to an element.


<area alt="tomato"
           accesskey="aKey" />

class - specifies a classname for the element allowing you to apply the style of the predefined class to the content.


<area alt="tomato"
           class="className" />

id - specifies a unique id for the element allowing you to apply the style of the predefined id to the content.


<area alt="tomato"
           id="idName" />

style - specifies an inline style for the element allowing you to apply the style to the content.


<area alt="tomato"
           style="color:red;text-align:left" />

tabindex - specifies the tab order of the element.


<area alt="tomato"
           tabindex="2" />

title - specifies extra information about the content.


<area alt="tomato"
           title="Title Information" />

Language Attributes

dir - specifies the directional flow of the content.


<!-- The text will flow from left to right -->
<area alt="tomato"
           dir="ltr" />

<!-- The text will flow from right to left -->
<area alt="tomato"
           dir="rtl" />

lang - specifies a language code for the content of the element.


<area alt="tomato"
           lang="en" />

xml:lang - specifies a language code for the content of the element in XHTML documents.


<area alt="tomato"
           xml:lang="fr" />

Document Event Attributes

NONE

Form Event Attributes

onblur - The JavaScript code to be run when an element loses focus.


<!-- Executes the go() function -->
<area alt="tomato"
           onblur="go()" />

onfocus - The JavaScript code to be run when an element gains focus.


<!-- Executes the go() function -->
<area alt="tomato"
           onfocus="go()" />

Image Event Attributes

NONE

Keyboard Event Attributes

onkeydown - The JavaScript code to be run when an element is in focus and keyboard key is pressed down and released.


<!-- Executes the go() function -->
<area alt="tomato"
           onkeydown="go()" />

onkeypress - The JavaScript code to be run when an element is in focus and keyboard key is pressed down and released.


<!-- Executes the go() function -->
<area alt="tomato"
           onkeypress="go()" />

onkeyup - The JavaScript code to be run when an element is in focus and keyboard key is released.


<!-- Executes the go() function -->
<area alt="tomato"
           onkeyup="go()" />

Mouse Event Attributes

onclick - The JavaScript code to be run when a mouse is clicked on the element.


<!-- Executes the go() function -->
<area alt="tomato"
           onclick="go()" />

ondblclick - The JavaScript code to be run when a mouse is double clicked on the element.


<!-- Executes the go() function -->
<area alt="tomato"
           ondblclick="go()" />

onmousedown - The JavaScript code to be run when the mouse button is pressed down while the cursor is over the element.


<!-- Executes the go() function -->
<area alt="tomato"
           onmousedown="go()" />

onmousemove - The JavaScript code to be run when the mouse button is moved.


<!-- Executes the go() function -->
<area alt="tomato"
           onmousemove="go()" />

onmouseout - The JavaScript code to be run when the mouse cursor moves off an element.


<!-- Executes the go() function -->
<area alt="tomato"
           onmouseout="go()" />

onmouseover - The JavaScript code to be run when the mouse cursor moves over an element.


<!-- Executes the go() function -->
<area alt="tomato"
           onmouseover="go()" />

onmouseup - The JavaScript code to be run when the mouse button is released while the cursor is over the element.


<!-- Executes the go() function -->
<area alt="tomato"
           onmouseup="go()" />

go to home page Homepage go to top of page Top