html tutorial - coords Attribute in HTML - html5 - html code - html form
Learn html - html tutorial - coords attribute in html - html examples - html programs
- The coords attribute defines the coordinates of an area in an image-map.
- This attribute is used together with the shape attribute to define the size, shape, and placement of an area.
Syntax for coords attribute in HTML:
<area coords="value">Applies To:
| Element | Attribute |
|---|---|
| <area> | coords |
coords Attribute Values:
| Shape | Value | HTML 4 | HTML 5 | Description |
|---|---|---|---|---|
| rect | x1,y1,x2,y2 | yes | yes | Describes the coordinates of the left, top, right, bottom corner of the rectangle. |
| circle | x,y,radius | yes | yes | Defines the center and the radius of the circle. |
| poly | x1,y1,x2,y2,..,xn,yn | yes | yes | Describes the edges of the polygon. |
Sample Coding for coords Attribute in HTML:
Tryit<!DOCTYPE html>
<html>
<head>
<title>Wikitechy coords attribute</title>
</head>
<body>
<img src="area.png" alt="usemap" usemap="#wikitechy"/>
<map name="wikitechy">
<area shape="rect" coords="19,26,126,62" href="https://www.wikitechy.com/php/php-programming">
<area shape="rect" coords="19,90,125,135" href="https://www.wikitechy.com/step-by-step-html-tutorials/html-introduction">
<area shape="circle" coords="71,180,36" href="https://www.wikitechy.com/css/css-introduction">
</map>
</body>
</html>Code Explanation for coords Attribute in HTML:
- <area> tag defines an area by using image map.
- coords is an attribute, which specifies the coordinates of an area in an image-map. (Here the rectangle shape is given.)
- href is an attribute, which defines the URL of the page
Output for coords Attribute in HTML:
- When user click the PHP rectangle that will navigate to the PHP Tutorial page in wikitechy website.
- The PHP Tutorial page will be shown.
Browser Support for coords Attribute in HTML:
 |
 |
 |
 |
 |
|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes |