HTML DOM Image useMap Property
Last Updated :
21 Jun, 2022
The HTML DOM Image usemap property is used to set or return the value of the usemap attribute of the Image element. The usemap attribute defines the image as a client-side image-map. The image-map is the clickable image area. It is used to create a relationship between the image and map. The value of this attribute is same as the value of the name attribute of the map element.
Syntax:
- It returns the usemap property.
imageObject.useMap
- It is used to set the image usemap property.
imageObject.useMap = #mapname
Property Values :
- #mapname: It is used to hold the map name containing the hash (#) character.
Return Values: It returns a string value that represents the value of the usemap attribute containing the hash character (“#”).
Example 1: This example returns a useMap property.
HTML
<!DOCTYPE html>
< html >
< body style = "text-align:center" >
< h2 style = "color:green" >
GeeksforGeeks
</ h2 >
< b >
HTML Dom Image useMap Property
</ b >< br />
< map name = "Geeks1" >
< area id = "Geeks" shape = "rect"
coords = "0, 0, 110, 100" alt = "Geeks"
href =
https ://manaschhabra:manaschhabra499@www.geeksforgeeks.org />
</ map >
< img id = "GFG" src =
width = "300" height = "100"
alt = "geeksforgeeks" usemap = "#Geeks1" >
</ br >
< button onclick = "GFG()" >
Click Here!
</ button >
< p id = "GEEK!" ></ p >
< script >
function GFG() {
// Return value of usemap attribute.
var x = document.getElementById("GFG").useMap;
document.getElementById("GEEK!").innerHTML = x;
}
</ script >
</ body >
</ html >
|
Output:
returns the usemap property
Example 2: This example sets the useMap property.
HTML
<!DOCTYPE html>
< html >
< body style = "text-align:center" >
< h2 style = "color:green" >
GeeksforGeeks
</ h2 >
< b >
HTML Dom Image useMap Property
</ b >
< map name = "Geeks1" >
< area id = "Geeks" shape = "rect"
coords = "0, 0, 110, 100" alt = "Geeks"
href =
https ://manaschhabra:manaschhabra499@www.geeksforgeeks.org />
</ map >
< img id = "GFG" src =
width = "300" height = "100"
alt = "Geeksforgeeks" usemap = "#Geeks1" >
</ br >
< button onclick = "GFG()" >
Click Here!
</ button >
< p id = "paraID" ></ p >
< script >
function GFG() {
// change value of usemap attribute.
var x = document.getElementById(
"GFG").useMap = "#Geeks2";
document.getElementById("paraID")
.innerHTML = "The value of the useMap "
+ "attribute was changed to: " + x;
}
</ script >
</ body >
</ html >
|
Output:
Sets the usemap property
Supported Browsers:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
Share your thoughts in the comments
Please Login to comment...