HTML shape Attribute

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

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.

<area>

Example

HTML

<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>