Area coordsProperty
Area Object
Definition and Usage
The coords property can set or return the value of the coords attribute of an area.
The coords attribute describes the coordinates of a clickable area in an image map.
Tip:The coordinates of the upper-left corner of the area are 0,0.
Syntax
areaObject.coords=value
The coords output can be the following values:
| Value | Description |
|---|---|
| x1,y1,x2,y2 | If the shape attribute is set to "rect", it specifies the coordinates of the rectangle's upper-left and lower-right corners. |
| x,y,radius | If the shape attribute is set to "circle", it specifies the center coordinates and the radius. |
| x1,y1,x2,y2,..,xn,yn | If the shape attribute is set to "poly", it specifies the coordinates of the polygon. If the first and last coordinates are not the same, the browser must add a coordinate to close the polygon. |
Browser Support
All major browsers support the coords attribute.
Examples
Examples
Return the coordinates of the "Venus" area in the image map:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example Tutorial (example.com)</title>
</head>
<body>
<img src="planets.gif.html" width="145" height="126" usemap="#planetmap">
<map name="planetmap">
<area id="venus" shape="circle" coords="124,58,8" alt="Venus" href="venus.htm.html">
</map>
<p>The coordinates of Venus:
<script>
document.write(document.getElementById("venus").coords);
</script>
</p>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Example Tutorial (example.com)</title>
</head>
<body>
<img src="planets.gif.html" width="145" height="126" usemap="#planetmap">
<map name="planetmap">
<area id="venus" shape="circle" coords="124,58,8" alt="Venus" href="venus.htm.html">
</map>
<p>The coordinates of Venus:
<script>
document.write(document.getElementById("venus").coords);
</script>
</p>
</body>
</html>
The output of the above example:
The coordinates of Venus: 124,58,8
Try it Yourself »
Area Object Other Extensions