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=
"https://media.geeksforgeeks.org/wp-content/uploads/a1-25.png"
        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=
"https://media.geeksforgeeks.org/wp-content/uploads/a1-25.png"
        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>