HTML | DOM Area Object
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