Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Set the shape of the area in HTML
The shape attribute in HTML defines the clickable area's geometry within an image map. It works with the <area> element to create interactive regions on images that users can click to navigate to different links.
Syntax
Following is the syntax for the shape attribute −
<area shape="value" coords="coordinates" href="url" alt="text">
The shape attribute accepts four possible values: rect, circle, poly, and default. Each shape type requires specific coordinate formats.
Shape Values and Coordinates
The following table shows the valid shape values and their coordinate requirements −
| Shape Value | Coordinates Format | Description |
|---|---|---|
rect |
x1,y1,x2,y2 | Rectangle defined by top-left and bottom-right corners |
circle |
x,y,radius | Circle defined by center point and radius |
poly |
x1,y1,x2,y2,x3,y3... | Polygon defined by multiple x,y coordinate pairs |
default |
Not required | Entire image area (fallback for unmapped regions) |
Using Rectangle Shape
The rect shape creates rectangular clickable areas. Coordinates specify the top-left corner (x1,y1) and bottom-right corner (x2,y2).
Example
<!DOCTYPE html>
<html>
<head>
<title>Rectangle Shape Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Click on the rectangle area</h2>
<img src="https://via.placeholder.com/300x200/4CAF50/white?text=Sample+Image" alt="Sample Map" usemap="#rectangleMap">
<map name="rectangleMap">
<area shape="rect" coords="50,50,150,100" href="#" onclick="alert('Rectangle clicked!')" alt="Rectangle Area">
</map>
</body>
</html>
This creates a rectangular clickable area from coordinates (50,50) to (150,100) on the image.
Using Circle Shape
The circle shape creates circular clickable areas. Coordinates specify the center point (x,y) and the radius.
Example
<!DOCTYPE html>
<html>
<head>
<title>Circle Shape Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Click on the circular area</h2>
<img src="https://via.placeholder.com/300x200/2196F3/white?text=Sample+Image" alt="Circle Map" usemap="#circleMap">
<map name="circleMap">
<area shape="circle" coords="150,100,40" href="#" onclick="alert('Circle clicked!')" alt="Circle Area">
</map>
</body>
</html>
This creates a circular clickable area centered at (150,100) with a radius of 40 pixels.
Using Polygon Shape
The poly shape creates irregular polygon areas. Coordinates are specified as a series of x,y pairs that define the polygon's vertices.
Example
<!DOCTYPE html>
<html>
<head>
<title>Polygon Shape Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Click on the triangular area</h2>
<img src="https://via.placeholder.com/300x200/FF9800/white?text=Sample+Image" alt="Polygon Map" usemap="#polygonMap">
<map name="polygonMap">
<area shape="poly" coords="150,50,100,150,200,150" href="#" onclick="alert('Triangle clicked!')" alt="Triangle Area">
</map>
</body>
</html>
This creates a triangular clickable area with vertices at (150,50), (100,150), and (200,150).
Multiple Shapes in One Image Map
You can combine multiple shapes within a single image map to create complex interactive areas.
Example
<!DOCTYPE html>
<html>
<head>
<title>Multiple Shapes Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Interactive Image Map with Multiple Shapes</h2>
<img src="https://via.placeholder.com/400x300/9C27B0/white?text=Interactive+Map" alt="Multi-shape Map" usemap="#multiMap">
<map name="multiMap">
<area shape="rect" coords="50,50,150,100" href="#" onclick="alert('Rectangle clicked!')" alt="Rectangle">
<area shape="circle" coords="300,100,40" href="#" onclick="alert('Circle clicked!')" alt="Circle">
<area shape="poly" coords="200,200,250,150,300,200,250,250" href="#" onclick="alert('Diamond clicked!')" alt="Diamond">
<area shape="default" href="#" onclick="alert('Default area clicked!')" alt="Default">
</map>
<p>Try clicking on different areas of the image above.</p>
</body>
</html>
This example demonstrates multiple clickable areas: a rectangle, circle, diamond polygon, and a default area that covers any unspecified regions.
Conclusion
The shape attribute allows you to define precise clickable regions on images using rectangles, circles, polygons, or default areas. Each shape type requires specific coordinate formats to define the boundaries of the interactive region. Multiple shapes can be combined within a single image map to create complex user interfaces.
202 Views
