HTML | DOM Map areas Collection

The Map areas Collection in HTML DOM is used to return the collection of all <area> elements in an image-map. The area elements are sorted as they appear in the source code.

Syntax:

mapObject.areas

Properties: It returns the number of area in the collection of elements.



Methods: The DOM Map areas Collection contains three methods which are listed below:

  • [index]: It is used to return the <form> element of the specified index. The index value starts with 0. NULL value is returned if the index value is out of range.
  • item(index): It is used to return the <form> element of specified index. The index value starts with 0. NULL value is returned if the index value is out of range. This method performs similarly to the above method.
  • namedItem(id): It is used to return the <form> element from the collection which matches the specified id. NULL value is returned if the id does not exist.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
  
<head
    <title
        HTML DOM Map  areas Collection  
    </title
</head
  
<body
     <h2>
         GeeksForGeeks
     </h2>
    <h2>HTML DOM Map  areas Collection</h2
      
    <button onclick = "GFG()"
        Click Here! 
    </button
      
    <p></p
      
    <map id = "Geeks" name = "Geeks"
          
        <area = "rect" coords = "0, 0, 110, 100"
        alt = "Geeks" href
  
        <area shape = "rect" coords = "110, 0, 190, 100"
        alt = "For" href
  
        <area shape = "rect" coords = "190, 0, 300, 100"
        alt = "GEEKS" href
    </map
      
    <img src
    width = "300" height = "100" alt="GFG" usemap = "#Geeks"
      
    <p id = "GEEK!"></p
      
    <script
        function GFG() { 
            var x = document.getElementById("Geeks").areas.length; 
            document.getElementById("GEEK!").innerHTML = x; 
        
    </script
</body
  
</html>

chevron_right


Output:

  • Before Clicking the Button:
  • After Clicking the Button:

Supported Browsers: The browsers supported by HTML DOM Map areas Collection are listed below:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Apple Safari
  • Opera


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.