The Map Object in HTML DOM is used to create and access the <map> element. The Map Object create the portion of image clickable and accessible.
Syntax:
- It is used to return Map object.
var x = document.getElementById("myMap");
- It is used to create Map Object.
var x = document.createElement("MAP");
Property Values:
- name: It is used to set or return the value of the name attribute of an image-map.
Collection Values:
- areas: It is used to return the collection of all <area> elements in an image-map.
- images: It is used to returns the collection of all <img> and <object> elements associated with the image-map
Example 1: This example describes the getElementById() method to access the <map> element.
html
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM Map Object
</title>
</head>
<body>
<h4>Click the button</h4>
<button onclick = "GFG()">
Click Here!
</button>
<p></p>
<map id = "Geeks" name = "Geeks">
<area shape = "rect" coords = "0, 0, 110, 100"
alt = "Geeks" href =
<area shape = "rect" coords = "110, 0, 190, 100"
alt = "For" href =
<area shape = "rect" coords = "190, 0, 300, 100"
alt = "GEEKS" href =
</map>
<img src =
width = "300" height = "100" alt="GFG" usemap = "#Geeks">
<p id = "GEEK!"></p>
<script>
function GFG() {
var x = document.getElementById("Geeks").areas.length;
document.getElementById("GEEK!").innerHTML = x;
}
</script>
</body
</html>
|
Output:
Example 2: This example describes the document.createElement() method to create <map> element.
html
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM Map Object
</title>
</head>
<body>
<h4>Click the button</h4>
<button onclick = "GFG()">
Click Here!
</button>
<p></p>
<img src =
width = "300" height = "100" usemap = "#myMap">
<p id = "GEEK!"></p>
<script>
function GFG() {
var x = document.createElement("MAP");
x.setAttribute("id", "myMap");
x.setAttribute("name", "myMap");
document.body.appendChild(x);
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:
Supported Browsers: The browser supported by DOM Map Object property are listed below:
- Google Chrome 5.0
- Internet Explorer 8.0
- Firefox 3.6
- Safari 5.0
- Opera 10.6
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!