Skip to content
Related Articles

Related Articles

Improve Article

HTML DOM Image useMap Property

  • Last Updated : 16 Jul, 2021
Geek Week

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 :