HTML shape Attribute

Description

The HTML shape attribute is utilized in conjunction with the <area> element within an image map to define the shape of a clickable region within the image. This attribute is essential for creating interactive images where different areas correspond to distinct links or actions.

The shape attribute, along with coords, enables web developers to create image maps with intricate and customized clickable regions. This functionality is particularly useful for navigation menus, interactive diagrams, and any interface where visual elements need to serve as clickable links or triggers for actions. When combined with appropriate scripting or server-side processing, image maps can significantly enhance user experience by providing intuitive and efficient navigation pathways within images.

Syntax

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

Values

  • defaultThis specifies the entire area of the image as the clickable region, used for fallback purposes or when a specific shape is not required.
  • rectThis defines a rectangular region. Coordinates are specified as x1,y1,x2,y2, where (x1,y1) are the coordinates of the upper left corner, and (x2,y2) are the coordinates of the lower right corner of the rectangle.
  • circleThis defines a circular region. Coordinates are specified as x,y,r where (x,y) are the coordinates of the center of the circle, and r is the radius of the circle.
  • polyThis defines a polygonal region with three or more sides. Coordinates are specified as x1,y1,x2,y2,...,xn,yn, representing the vertices of the polygon in order.

Applies To

The shape attribute can be used on the following html elements.

Example

<img alt="Shapes" height="102" src="images/shapes.jpg" style="border: none;" usemap="#shapes" width="375" />

<map name="shapes" id="shapes">
<area shape="circle" coords="58,50,40" href="javascript:clicked_on('circle');" title="Circle" alt="Circle"/>
<area shape="rect" coords="136,11,227,89" href="javascript:clicked_on ('rectangle');" title="Rectangle" alt="Rectangle"/>
<area shape="poly" coords="309,13,358,89,257,89" href="javascript:clicked_on('triangle');" title="Triangle" alt="Triangle"/>
<area shape="default" nohref="nohref" title="Default" alt="Default"/>
</map>
<script>
function clicked_on ( clicked_shape )
{
alert ( "You clicked on the " + clicked_shape );
}
</script>

Browser Support

The following table will show you the current browser support for the HTML shape Attribute.

Desktop
Edge Chrome Firefox Opera Safari
1211151
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
18414114.4

Last updated by CSSPortal on: 29th March 2024