area adding coordinates for each type of shape
Calculating the coordinates for different shapes: area element
| 3 shapes | 3 shapes & coordinates hints |
|---|---|
| 1. An image with 3 areas: rectangle, circle and polygon | |
 |  |
| 2. CSS area: the green rectangle in page: | |
| <area shape="rect" coords="1,2,3,4"> | |
| 3. HTML area: the orange circle in page: | |
| <area shape="circle" coords="1,2,3"> | |
| 4. JS area: the blue polygon in page: | |
| <area shape="poly" coords="1,2,3,4,5,6,7,8,9,10,11,12,13,14"> | |
| 5. blank area = default area | |
| <area shape="default" href="default_resource.php" alt="default resource"> | |
| 6. Video demo: | |
| instead of 1,2,3... you'll have a valid integer, in CSS pixels: watch the video demo below | |
Video demonstration area element: adding coordinates to different shapes
HTML5 area: adding coordinates to different shapes Tutorial
| min | video details |
|---|---|
| 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) |