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 (
altattribute) for each clickable area to ensure accessibility for users with disabilities or when images are not displayed.