How to use the shape attribute in the HTML img Tag ?

The “shape” attribute in <img> Tags are used in conjunction with client-side image maps to define the shape of clickable areas within an image. This attribute specifies the shape of the clickable region, allowing developers to create non-rectangular clickable areas such as circles, rectangles, or polygons.

Syntax

<img src="image.jpg" usemap="#map_name" shape="shape_type" coords="coordinates">

Where,

• "image.jpg" is the URL of the image file.
• "#map_name" is the name of the associated <map> element.
• "shape_type" specifies the shape of the clickable area, such as “rect” (rectangle), “circle”, or “poly” (polygon).
• "coordinates" are the coordinates defining the shape of the clickable area.

Key Point of Shape Attribute

Key Point	Description
Clickable Areas	The “shape” attribute defines the shape of clickable areas within an image, allowing users to interact with specific regions of the image.
Shape Types	Supported shape types include “rect” (rectangle), “circle”, and “poly” (polygon), each defined by a set of coordinates.
Accessibility	Descriptive alternative text should be provided for each clickable area to enhance accessibility for users with disabilities or when images are not displayed.

Features

• Supported Shapes: Choose from supported shape types such as “rect” (rectangle), “circle”, or “poly” (polygon) to define the clickable area.
• Coordinate System: Define the shape using coordinates specified relative to the top-left corner of the image. For example, a rectangle requires four coordinates (x1, y1, x2, y2), a circle requires three (x, y, radius), and a polygon requires a series of X, Y coordinate pairs.
• Accessibility: Provide descriptive alternative text (alt attribute) for each clickable area to ensure accessibility for users with disabilities or when images are not displayed.