Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM Area Object
The HTML DOM Area Object is associated with the image map in HTML. Area basically represents the clickable area inside the image map.
The image object helps us in creating and accessing the <area> element within the object. We can change clickable region inside the map or change the shape etc. of the image map based on the user input. It can also be used to manipulate the link inside the area element
Properties
Following are the properties for Area Object −
| Value | Description |
|---|---|
| alt | To set or return alt attribute value. |
| coords | To set or return the cords attributes of an area. |
| hash | To set or return the anchor part of the href attribute value. |
| host | To set or return both the hostname and port part of the href attribute value. |
| hostname | To set or return the hostname part of the href attribute value. |
| href | To set or return the value of the href attribute of an area. |
| noHref | To set or return the value of the nohref attribute of an area. Deprecated in HTML5. |
| origin | To return the protocol, hostname and port part of the href attribute value. |
| password | To set or return the password part of the href attribute value. |
| pathname | To set or return the pathname part of the href attribute value. |
| port | To set or return the port part of the href attribute value. |
Example
Let us see an example of area object −
<!DOCTYPE html>
<html>
<body>
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/New7Wonders.jpg/276pxNew7Wonders.jpg" width="400" height="400" usemap="#7Wonders">
<map id="WonderWorld" name="7Wonders">
</map>
<p>Click the button to create an AREA element with a link to "Maya City", which is one of the New Seven Wonders of the World.</p>
<button onclick="myWonder()">CLICK IT</button>
<p id="SAMPLE"></p>
<script>
function myWonder() {
var x = document.createElement("AREA");
x.setAttribute("href", "https://en.wikipedia.org/wiki/Maya_city");
x.setAttribute("shape", "circle");
x.setAttribute("coords", "124,58,16");
document.getElementById("WonderWorld").appendChild(x);
document.getElementById("SAMPLE").innerHTML = "The AREA element was created, and
you can now click on Maya City.";
}
</script>
</body>
</html>Output
This will produce the following output −
After clicking on the CLICK IT button −
Now when you click on “Maya city”, it will take you to their Wikipedia page.
In the above example −
We have included an image using tag and specified its width, height and id.
<img data-fr-src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/New7Wonders.jpg/276pxNew7Wonders.jpg" width="400" height="300" usemap="#7Wonders">
Then we have created an empty map where we will add an image, area and other things later −
<map id="WonderWorld" name="7Wonders"></map>
We have then created a button named CLICK IT which will execute the myWonder() function.
<button onclick="myWonder()">CLICK IT</button>
The myWonder() function first creates an element and assigns it to variable x. Set various attributes to it like href, shape and cords. At last we append the element associated with variable x to the image map as the child node and also display the area element created and now you can click on “Maya city” inside the paragraph with id “Sample” using innerHTML −
function myWonder() {
var x = document.createElement("AREA");
x.setAttribute("href", "https://en.wikipedia.org/wiki/Maya_city ");
x.setAttribute("shape", "circle");
x.setAttribute("coords", "124,58,16");
document.getElementById("WonderWorld").appendChild(x);
document.getElementById("SAMPLE").innerHTML = "The AREA element was created, and
you can now click on Maya City.";
}
57 Views
