Mega Code Archive
Area
<![CDATA[
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 tag to define an area within a picture that will act as a hyperlink.
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 HandlersDescription
hashThe portion of the URL that is the anchor, including the # symbol
hostThe hostname (IP address) and port specified in the URL
hostnameThe hostname specified within the URL
hrefThe entire URL
pathnameThe path of the file specified in the URL beginning with the / symbol
portThe port specified in the URL
protocolThe protocol specified in the URL, including the ending colon (:)
searchThe search part of the URL, including the beginning question mark (?)
targetThe name of the target window in which the URL should be displayed
handleEvent()Calls the event handler associated with this event
onDblClickInvoked when the mouse is double-clicked while in the region defined by the Area object
onMouseOutInvoked when the mouse moves outside the region defined by the Area object
onMouseOverInvoked 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.rntsoft.com"
target="_top"
onMouseOver="overBox(0)"
onMouseOut="clearBox()">
<area name="greenArea"
coords="51,1,99,49"
href="http://www.rntsoft.com"
target="_top"
onMouseOver="overBox(1)"
onMouseOut="clearBox()">
<area name="yellowArea"
coords="1,51,51,99"
href="http://www.rntsoft.com"
target="_top"
onMouseOver="overBox(2)"
onMouseOut="clearBox()">
<area name="blueArea"
coords="51,51,99,99"
href="http://www.rntsoft.com"
target="_top"
onMouseOver="overBox(3)"
onMouseOut="clearBox()">
</map>
<img src="http://www.rntsoft.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>
]]>