Open In App

How to specify the coordinates of an area in HTML5 ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will see how to set the coordinates of the <area> element in HTML5. The coords attribute of <area> is used to specify the coordinate of an area in an image-map. The shape attribute is used to specify the size, shape, and placement of the area. The coordinates (0, 0) denotes the top-left corner of the sketch.

Syntax:

<area coords="value">

Example: In this example, the three shape areas are specified with the shape parameter and coordinates so that they can be clicked on to view the shape.

HTML




<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      text-align: center;
    }
  
    h1 {
      color: green;
    }
  </style>
</head>
<body>
  <h1>GeeksforGeeks</h1>
  <h3>
    How to specify the coordinates
    of the area in HTML5?
  </h3>
  <img src=
       alt="alt_attribute"
       width="300" height="119" 
       class="aligncenter" 
       usemap="#shapemap" />
  
  <map name="shapemap">
  
    <!-- area tag contained image. -->
    <area shape="poly"
          coords="59, 31, 28, 83, 91, 83"
          href=
          alt="Triangle">
  
    <area shape="circle" 
          coords="155, 56, 26"
          href=
          alt="Circle">
  
    <area shape="rect" 
          coords="224, 30, 276, 82"
          href=
          alt="Square">
  </map>
</body>
</html>


Output:



Last Updated : 08 Mar, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads