w3-video.com logo

HTML5 Tutorial

Home HTML5 XAMPP .htaccess Firefox Notepad++

Share it



area shape attribute

The shape attribute on the area element:

Examples

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