HTML <area> shape attribute

HTML <area> Tag

Definition and usage

shape Attribute defines the shape of the area.

shape Attribute with coords attribute Used together to specify the size, shape, and position of the area.

Example

Use the shape attribute to specify the shape of each area in the image map:

<map name="planetmap">
<area shape="rect" coords="0,0,114,576" href="sun.html" alt="Sun">
<area shape="circle" coords="190,230,5" href="mercur.html" alt="Mercury">
<area shape="circle" coords="228,230,5" href="venus.html" alt="Venus">
</map>

Try it yourself

Syntax

<area shape="default|rect|circle|poly">

Attribute value

Value Description
default Specify the entire area.
rect Define a rectangular area.
circle Define a circular area.
poly Define a polygonal area.

Detailed explanation:

shape This attribute is used to define the shape of the mouse-sensitive area in the image map:

  • Circle (circ or circle)
  • Polygon (poly or polygon)
  • Rectangle (rect or rectangle)

shape The value of the attribute affects how the browser interprets the coords attribute. If not used shape If the attribute is not specified, and there are no 4 coordinates included in the tag, then the browser will ignore the entire area. The default value of the attribute is assumed to be used. According to the standard, default means that the area covers the entire image. In practice, browsers use the default rectangular area and expect to find 4 coords values. If no shape is specified and no 4 coordinates are included in the tag, then the browser will ignore the entire area.

can recognize shape Browsers that can provide a default value for an attribute can provide an area that includes all hotspots for clicking outside the range defined by other hotspot definitions. Since the order of areas in the <map> tag is "first come, first served", all default areas must be placed at the end. Otherwise, the default area will cover all areas that appear in other image maps.

Browsers do not have strict requirements for the implementation of shape names. For example, for rectangles, Netscape 4 cannot recognize "rectangle", but can recognize "rect". For this reason, we recommend using abbreviated names.

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support

HTML <area> Tag