Skip to content
Related Articles

Related Articles

HTML DOM Image useMap Property

Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 21 Jun, 2022
Improve Article
Save Article

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

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!