|
The example of area tag in HTML
<img src="imageURL.jpg" border="0" usemap="#relation" />
<map name="relation">
<area shape="rect" coords="181,70,591,133" href="urlPath.html" />
</map>
Working example of area tag
The HTML area tag is used to defining area in image map. This image mapping is user clickable area, if user click in area defined in map, the control can be transfer to another defined webpage or image.
The area tag is used with image tag and map tag written inside the image and map tags.
To use the map tag in image, usemap attribute should be used in image tag and should be related with name attribute of map tag.
Area tag is supported by all web browsers.
Target attribute is not supported by Strict DTD of area tag.
Area tag supports all common attribute and event attribute.
Area tag Attribute
| Attribute |
Value |
Explaination |
| shape |
rect
circle
poly
|
It defines the shape rectangular, circle or poly |
| coords |
coordinates |
comma-separated list of coordinates of area |
| href |
URL |
URL path for linked web page |
| target |
_blank
_parent
_self
_top |
Linked page open in window |
| nohref |
nohref |
area is not related with href link |
| alt |
text |
short description of element tag |
| tabindex |
NUMBER |
position in tabbing order |
| accesskey |
Character |
accessibility key character (Shortcut key character) |
Common Attribute of Area Tag
| Attribute |
Value |
Explaination |
| id |
ID |
unique id document for link element |
| class |
classname |
list of CSS classes |
| style |
StyleSheet |
associated style information of style tags |
| title |
Text |
information about an element shown on mouse over cursor |
| lang |
LanguageCode |
Language Code of the element |
| dir |
(ltr|rtl) |
direction for weak/neutral text |
Events Attribute of Area Tag
| Attribute |
Value |
Explaination |
| onfocus |
event |
Event Fire on element got the focus |
| onblur |
event |
Event Fire on element lost the focus |
| onclick |
event |
Event Fire on mouse button was clicked |
| ondblclick |
event |
Event Fire on a mouse button was double clicked |
| onmousedown |
event |
Event Fire on a mouse button was pressed down |
| onmouseup |
event |
Event Fire on a mouse button was released |
| onmouseover |
event |
Event Fire on a mouse was moved onto |
| onmousemove |
event |
Event Fire on a mouse was moved within |
| onmouseout |
event |
Event Fire on a mouse was moved away |
| onkeypress |
event |
Event Fire on a key was pressed and released |
| onkeydown |
event |
Event Fire on a key was pressed down |
| onkeyup |
event |
Event Fire on a key was released |
|
Link to Us