Web4College

HTML shape attribute

The shape attribute represents the shape to be created on an image.

Example
Try it
<img src="files/three images.jpg" usemap="#shapes" alt="three shapes of triangle, square, circle">
<map name="shapes">
  <area href="blue.html" shape="circle" coords="196,89,33" >
</map>
three shapes of triangle, square, circle

Attribute values

All possible values of shape attribute

shape='circle'

It represents a shape of a circle. It has three points. The syntax to define the shape of a circle.

Example
Try it
<area href="URL" shape="circle" coords="X,Y,R">

  • X is the distance from the center of the circle to the left side of the image.

  • Y is the distance from the center of the circle to the top side of the image.

  • R is the radius of the circle.

shape='rectangle'

It defines a shape of a rectangle. A rectangle has four points. The syntax to make a shape of the rectangle.

Example
Try it
<area href="URL" shape="rectangle" coords="A,B,C,D">

shape='polygon'

A polygon has more than one points. And a point has two coordinates (one coordinate is the distance from the left edge of the image and the other one is the distance from the top edge of the image). For example, hexagon, heptagon or more shapes.

shape='default'

The default shape is the whole image. The default shape has 0 coordinates.

Related Tags

The tags that support shape attribute

<area> tag

<area> element represents a link corresponding to an area on an image.