area shape attribute
The shape attribute on the area element:
- allows you to specify the shape of the area
- shape is a specific attribute → can be applied ONLY on the next HTML5 element: area
Examples
<area | attribute | = | "value(s)" | > | Examples | ||
---|---|---|---|---|---|---|---|
7. | shape | = | circle, poly, rect, default | <shape="circle" coords="76, 189, 56" > |
Video demonstration area shape attribute
HTML5 area shape attribute Tutorial
min | video details |
---|---|
00:00 | video demonstration: shape attribute on area element |
00:07 | shape attribute on area element allows you to specify the shape of the area |
00:11 | only: 4 keywords are allowed as value of the shape attribute: rect, circle, poly, default |
00:17 | adding shape attribute on area elements |
00:22 | if we want to mark up this area on our image, we'll add its corresponding shape = rectangle, keyword: rect |
00:31 | if we want to mark up this area on our image, we'll add its corresponding shape = circle, keyword: circle |
00:40 | if we want to mark up this area on our image, we'll add its corresponding shape = polygon, keyword: poly |
00:49 | and if we want to mark up the rest of the area (see the blank space) except the 3 areas already marked up, then we'll add the corresponding shape = default, keyword: default |
00:59 | if shape attribute is present on area element, then coords attribute is required |
01:03 | now we'll need to add the coordinates for each area: watch the video demo corresponding to coords attribute here |