w3-video.com logo

HTML5 Tutorial

Home HTML5 XAMPP .htaccess Firefox Notepad++

Share it



area coords attribute

The coords attribute on the area element:

Examples

<areaattribute="value(s)" >Examples
2.coords=number<area 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)
area intro area browser display area parents area coordinates for shapes area syntaxarea href alt attributesarea download attributearea hreflang attributearea rel attributearea shape attributearea target attributearea type attribute