Skip to content
Related Articles

Related Articles

Improve Article

HTML DOM Image useMap Property

  • Last Updated : 16 Jul, 2021

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() {
  
            // Return 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

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :