The Area Object property in HTML DOM is used to create and access the <area> element with in the object. For example, making the area of image clickable and access other data through that which can be used further in map or other object.
Syntax:
- It is used to access a <area> element.
var x = document.getElementById("myArea");
- It is used to create a <area> element.
var x = document.createElement("AREA");
Property Values:
Value |
Description |
alt |
It is used to set or return the value of the alt attribute of an area. |
coords |
It is used to set or return the value of the coords attribute of an area. |
hash |
It is used to set or return the anchor part of the href attribute value. |
host |
It is used to set or return the hostname and port part of the href attribute value. |
hostname |
It is used to set or return the hostname part of the href attribute value. |
href |
It is used to set or return the value of the href attribute of an area. |
noHref |
It is used to set or return the value of the nohref attribute of an area. |
origin |
It is used to returns the protocol, hostname and port part of the href attribute value. |
password |
It is used to set or return the password part of the href attribute value. |
pathname |
It is used to set or return the pathname part of the href attribute value. |
port |
It is used to set or return the port part of the href attribute value. |
protocol |
It is used to set or return the protocol part of the href attribute value. |
search |
It is used to set or return the querystring part of the href attribute value. |
shape |
It is used to set or return the value of the shape attribute of an area. |
target |
It is used to set or return the value of the target attribute of an area. |
username |
It is used to set or return the username part of the href attribute value. |
Example-1: Return href attribute of clickable image.
html
<!DOCTYPE html>
< html >
< title >
HTML DOM Area Object
</ title >
< body >
< h4 >Click the button</ h4 >
< button onclick="GFG()">Click Here!
< br >
</ button >
< map name="Geeks1">
< area id="Geeks"
shape="rect"
coords="0, 0, 110, 100"
alt="Geeks"
href=
</ map >
< img src=
width="300"
height="100"
alt="Geeksforgeeks"
usemap="#Geeks1">
< p id="GEEK!"></ p >
< script >
function GFG() {
// Return href attribute.
var x =
document.getElementById("Geeks").href;
document.getElementById(
"GEEK!").innerHTML = x;
}
</ script >
</ body >
</ html >
|
Output:
Example-2: Creating area element and set href attribute.
html
<!DOCTYPE html>
< html >
< title >
HTML DOM Area Object
</ title >
< body >
< h4 >Click the button</ h4 >
< button onclick="GFG()">Click Here!
< br >
</ button >
< p ></ p >
< img src=
width="300"
height="100"
usemap="#planetmap">
< map id="myMap" name="planetmap">
</ map >
< p id="GEEK!"></ p >
< script >
function GFG() {
// creating area element using
// document.createElement("AREA");
var y = document.createElement("AREA");
y.setAttribute("href",
y.setAttribute("shape", "rect");
y.setAttribute("coords", "190, 0, 300, 100");
document.getElementById("myMap").appendChild(y);
document.getElementById("GEEK!").innerHTML =
"Click on the GEEKS area in the image.";
}
</ script >
</ body >
</ html >
|
Output:
Steps to execute the above code:
- Save the file
- Execute on an standard browser.
Supported Browsers: The browser supported by DOM Area Object property are listed below:
- Google Chrome 5.0
- Internet Explorer 8.0
- Firefox 3.6
- Safari 5.0
- Opera 10.6
Last Updated :
30 Jun, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...