# 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) |