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 coordinates of the area in an image map in HTML?
To set the coordinates of the area in an image map, use the coords attribute in HTML. The coords attribute defines the clickable areas within an image map by specifying precise coordinates that correspond to different shapes like rectangles, circles, and polygons.
Syntax
Following is the syntax for the coords attribute −
<area shape="shape_type" coords="coordinate_values" href="link_url" alt="description">
The coordinate values depend on the shape type specified in the shape attribute.
Coordinate Values by Shape
The coords attribute accepts different coordinate formats based on the shape −
Rectangle (rect) −
coords="x1,y1,x2,y2"where (x1,y1) is the top-left corner and (x2,y2) is the bottom-right corner.Circle (circle) −
coords="x,y,radius"where (x,y) is the center point and radius is the circle's radius in pixels.Polygon (poly) −
coords="x1,y1,x2,y2,x3,y3,..."listing each vertex point of the polygon in order.Default (default) − No coords needed; covers the entire image area not defined by other areas.
Using Rectangle Coordinates
Rectangle areas use four coordinates to define the top-left and bottom-right corners of a rectangular clickable region.
Example
<!DOCTYPE html>
<html>
<head>
<title>Rectangle Coordinates in Image Map</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Click on the rectangles</h2>
<img src="https://via.placeholder.com/300x200/4682b4/ffffff?text=Sample+Image" alt="Sample Image" usemap="#rectMap">
<map name="rectMap">
<area shape="rect" coords="50,50,150,100" href="#section1" alt="Top Rectangle">
<area shape="rect" coords="180,120,280,170" href="#section2" alt="Bottom Rectangle">
</map>
<div id="section1"><h3>Section 1</h3><p>You clicked the top rectangle (50,50,150,100)</p></div>
<div id="section2"><h3>Section 2</h3><p>You clicked the bottom rectangle (180,120,280,170)</p></div>
</body>
</html>
The first rectangle spans from coordinates (50,50) to (150,100), while the second spans from (180,120) to (280,170).
Using Circle Coordinates
Circle areas require three values: x-coordinate, y-coordinate of the center, and the radius in pixels.
Example
<!DOCTYPE html>
<html>
<head>
<title>Circle Coordinates in Image Map</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Click on the circular areas</h2>
<img src="https://via.placeholder.com/400x300/228b22/ffffff?text=Green+Background" alt="Circle Map" usemap="#circleMap">
<map name="circleMap">
<area shape="circle" coords="150,100,50" href="#circle1" alt="Large Circle">
<area shape="circle" coords="300,200,30" href="#circle2" alt="Small Circle">
</map>
<div id="circle1"><h3>Large Circle</h3><p>Center at (150,100) with radius 50px</p></div>
<div id="circle2"><h3>Small Circle</h3><p>Center at (300,200) with radius 30px</p></div>
</body>
</html>
The first circle has its center at (150,100) with a radius of 50 pixels, while the second circle is centered at (300,200) with a radius of 30 pixels.
Using Polygon Coordinates
Polygon areas use multiple coordinate pairs to define irregular shapes by connecting vertices in order.
Example
<!DOCTYPE html>
<html>
<head>
<title>Polygon Coordinates in Image Map</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Click on the polygon shapes</h2>
<img src="https://via.placeholder.com/350x250/dc143c/ffffff?text=Polygon+Map" alt="Polygon Map" usemap="#polyMap">
<map name="polyMap">
<area shape="poly" coords="100,50,150,100,100,150,50,100" href="#diamond" alt="Diamond Shape">
<area shape="poly" coords="200,50,250,80,280,130,230,180,180,150,170,100" href="#hexagon" alt="Hexagon Shape">
</map>
<div id="diamond"><h3>Diamond</h3><p>Four-sided polygon with coordinates: 100,50,150,100,100,150,50,100</p></div>
<div id="hexagon"><h3>Hexagon</h3><p>Six-sided polygon with multiple coordinate pairs</p></div>
</body>
</html>
The diamond shape connects four points, while the hexagon uses six coordinate pairs to create an irregular six-sided clickable area.
Combined Shape Example
Following example demonstrates all three shape types in a single image map −
Example
<!DOCTYPE html>
<html>
<head>
<title>Multiple Shapes in Image Map</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/87ceeb/000000?text=Mixed+Shapes" alt="Mixed Shapes" usemap="#mixedMap" style="border: 2px solid #333;">
<map name="mixedMap">
<area shape="rect" coords="20,20,120,80" href="#rect-info" alt="Rectangle Area">
<area shape="circle" coords="200,150,40" href="#circle-info" alt="Circle Area">
<area shape="poly" coords="300,50,350,100,320,150,270,130,280,80" href="#poly-info" alt="Polygon Area">
</map>
<div id="rect-info"><h3>Rectangle Area</h3><p>Coordinates: 20,20,120,80</p></div>
<div id="circle-info"><h3>Circle Area</h3><p>Center: (200,150), Radius: 40px</p></div>
<div id="poly-info"><h3>Polygon Area</h3><p>Five-sided irregular shape</p></div>
</body>
</html>
This example combines rectangular, circular, and polygonal clickable areas within a single image, each with different coordinate specifications.
Coordinate Reference Table
| Shape Type | Coordinate Format | Description | Example |
|---|---|---|---|
rect |
x1,y1,x2,y2 |
Top-left and bottom-right corners | coords="50,50,150,100" |
circle |
x,y,radius |
Center point and radius in pixels | coords="100,100,50" |
poly |
x1,y1,x2,y2,... |
Series of vertex coordinates | coords="50,50,100,25,150,50,100,75" |
default |
None required | Covers remaining image area | shape="default" |
Conclusion
The coords attribute defines precise clickable areas within image maps using coordinate values specific to each shape type. Rectangle areas use four coordinates for corners, circles use center point and radius, and polygons use multiple vertex coordinates. Proper coordinate specification ensures accurate clickable regions that enhance user interaction with images.
1K+ Views
