An instance of the Area object is created with each occurrence of the tag within an HTML document.
In HTML documents, the tag is used in conjunction with the
Because the Area object is a hyperlink, it is equivalent to the Link object in JavaScript.
The Area object is stored in the same array where Link objects are stored.
| Properties/Methods/Event Handlers | Description |
| hash | The portion of the URL that is the anchor, including the # symbol |
| host | The hostname (IP address) and port specified in the URL |
| hostname | The hostname specified within the URL |
| href | The entire URL |
| pathname | The path of the file specified in the URL beginning with the / symbol |
| port | The port specified in the URL |
| protocol | The protocol specified in the URL, including the ending colon (:) |
| search | The search part of the URL, including the beginning question mark (?) |
| target | The name of the target window in which the URL should be displayed |
| handleEvent() | Calls the event handler associated with this event |
| onDblClick | Invoked when the mouse is double-clicked while in the region defined by the Area object |
| onMouseOut | Invoked when the mouse moves outside the region defined by the Area object |
| onMouseOver | Invoked when the mouse moves into the region defined by the Area object |
<html>
<body>
<map name="colorMap">
<area name="redArea"
coords="1,1,48,48"
href="http://www.java2s.com"
target="_top"
onMouseOver="overBox(0)"
onMouseOut="clearBox()">
<area name="greenArea"
coords="51,1,99,49"
href="http://www.java2s.com"
target="_top"
onMouseOver="overBox(1)"
onMouseOut="clearBox()">
<area name="yellowArea"
coords="1,51,51,99"
href="http://www.java2s.com"
target="_top"
onMouseOver="overBox(2)"
onMouseOut="clearBox()">
<area name="blueArea"
coords="51,51,99,99"
href="http://www.java2s.com"
target="_top"
onMouseOver="overBox(3)"
onMouseOut="clearBox()">
</map>
<img src="http://www.java2s.com/style/logo.png" align="top"
height="100" width="100" usemap="#colorMap">
<br><br><b><u>AREA Properties</u></b>
<form name="myForm">
hash=<input name="tHash" type="textarea"><br>
host=<input name="tHost" type="textarea"><br>
hostname=<input name="tHostName" type="textarea"><br>
href=<input name="tHref" type="textarea"><br>
pathname<input name="tPathName" type="textarea"><br>
port=<input name="tPort" type="textarea"><br>
protocol=<input name="tProtocol" type="textarea"><br>
search=<input name="tSearch" type="textarea"><br>
target=<input name="tTarget" type="textarea"><br>
</form>
<script language="javascript">
<!--
function overBox(num) {
document.myForm.tHash.value = document.links[num].hash;
document.myForm.tHost.value = document.links[num].host;
document.myForm.tHostName.value = document.links[num].hostname;
document.myForm.tHref.value = document.links[num].href;
document.myForm.tPathName.value = document.links[num].pathname;
document.myForm.tPort.value = document.links[num].port;
document.myForm.tProtocol.value = document.links[num].protocol;
document.myForm.tSearch.value = document.links[num].search;
document.myForm.tTarget.value = document.links[num].target;
}
function clearBox() {
document.myForm.tHash.value = "";
document.myForm.tHost.value = "";
document.myForm.tHostName.value = "";
document.myForm.tHref.value = "";
document.myForm.tPathName.value = "";
document.myForm.tPort.value = "";
document.myForm.tProtocol.value = "";
document.myForm.tSearch.value = "";
document.myForm.tTarget.value = "";
}
// End Hide-->
</script>
</body>
</html>