area coords attribute
The coords attribute on the area element:
- allows you to specify the coordinates of the area
- coords is a specific attribute → can be applied ONLY on the next HTML5 element: area
Examples
<area | attribute | = | "value(s)" | > | Examples | ||
---|---|---|---|---|---|---|---|
2. | coords | = | number | <shape="circle" coords="76, 189, 56" > |
Video demonstration area coords attribute
HTML5 area coords attribute Tutorial
min | video details |
---|---|
00:00 | video tutorial: coords attribute on area element |
00:09 | coords attribute allows you to specify the coordinates of the area |
00:13 | adding coords attribute to each area element |
00:18 | default shape does not have a coords attribute |
00:22 | next we will find and add the coordinates for each shape (area) |
00:24 | 1. shape rect: the rectangle accepts 4 integers separated by comma |
00:35 | 1st integer: the distance from the left edge of the image to the left side of the rectangle: 40px 2nd integer: the distance from the top edge of the image to the top side of the rectangle: 65px |
00:53 | 3rd integer: the distance from the left edge of the image to the right side of the rectangle: 182px 4th integer: the distance from the top edge of the image to the bottom side of the rectangle:123px |
01:02 | 2. shape circle: the circle accepts 3 integers separated by comma |
01:09 | 1st integer: the distance from the left edge of the image to the center of the circle: 240px 2nd integer: the distance from the top edge of the image to the center of the circle: 207px 3rd integer: the radius of the circle: 40px |
01:19 | 3. shape poly: the polygon accepts pairs of integers (1pair for each point), each integer separated by comma |
01:26 | 1st point (corner): 1st integer: the distance from the left edge of the image to this point: 350px 2nd integer: the distance from the top edge of the image to this point: 281px |
01:37 | moving to next point (corner) |
01:38 | 2nd point (corner): 3rd integer: the distance from the left edge of the image to this point: 399px 4th integer: the distance from the top edge of the image to this point: 301px |
01:48 | and so forth until we add the coordinates for all points (corners) |