How to specify the coordinates of an area in HTML5 ?
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 >w3wiki</ h1 > < h3 > How to specify the coordinates of the area in HTML5? </ h3 > < img src = "https://media.w3wiki.net/wp-content/uploads/20190227165729/area11.png" 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 = "https://media.w3wiki.net/wp-content/uploads/20190227165802/area2.png" alt = "Triangle" > < area shape = "circle" coords = "155, 56, 26" href = "https://media.w3wiki.net/wp-content/uploads/20190227165934/area3.png" alt = "Circle" > < area shape = "rect" coords = "224, 30, 276, 82" href = "https://media.w3wiki.net/wp-content/uploads/20190227170021/area4.png" alt = "Square" > </ map > </ body > </ html > |
Output:
Contact Us