The HTML coords attribute specifies the coordinates of an area in the image-map. To specify the shape, size, and placement of an area, it is used with the shape attribute.
You can use this attribute on the <area> element.
The top-left corner of an area has the 0,0 coordinates.
The coords attribute can have the following values:
- x1, y1, x2, y2. It specifies a rectangle’s top-left (x1, y1) and bottom-right (x2, y2) corner coordinates.
- x, y, radius. It specifies a circle’s center coordinates (x, y) and radius (radius).
- x1, y1, x2, y2, .., xn, yn. It specifies a polygon’s coordinates.
Syntax
<area coords="value">Example of the HTML coords Attribute:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Click on the logo or on one of the logo item to watch it closer:</p>
<img src="/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg" width="250" height="150" alt="block" usemap="#blockmap">
<map name="blockmap">
<area shape="circle" coords="50,32,25" alt="html" href="/uploads/media/book_gallery/0001/01/d450f0358f947dffb3af91195c3002600d74101b.png">
<area shape="circle" coords="218,115,25" alt="css" href="/uploads/media/book_gallery/0001/01/25521e981b34da57c8f51baddc5b76351b855818.png">
<area shape="circle" coords="195,32,28" alt="php" href="/uploads/media/book_gallery/0001/01/4bbee6698c4884f25c46010d61b658dd62d2c04f.png">
<area class="homepage" shape="rect" coords="90,90,35,55" alt="php" href="https://www.w3docs.com/">
</map>
</body>
</html>Practice Your Knowledge
What is the function of the 'coords' attribute in HTML and how is it used?
Correct!
Incorrect!
Quiz Time: Test Your Skills!
Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.