How to specify the coordinates of an area in HTML5 ?
Last Updated :
08 Mar, 2021
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 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:
Share your thoughts in the comments
Please Login to comment...