HTML - attributes - coords

revision: January 28, 2025

Content

"coords" attribute : specifies the coordinates of an area.

It is used with areas in an image map. The coords attribute is used together with the "shape attribute" to specify the size, shape, and placement of an area. The coordinates of the top-left corner of an area are 0,0.

syntax

<area coords="value">

x1, y1, x2, y2 : specifies the coordinates of the top-left and bottom-right corner of the rectangle (shape="rect")

x, y, radius: specifies the coordinates of the circle center and the radius (shape="circle")

x1, y1, x2, y2, .., xn, yn: specifies the coordinates of the edges of the polygon. If the first and last coordinate pairs are not the same, the browser will add the last coordinate pair to close the polygon (shape="poly")

some examples

codes:

                    <img src="../../pics/computer-map.png" alt="Computer" usemap="#computermap">
                    <map name="computermap">
                    <area shape="rect" coords="253,142,16,2" alt="screen" 
                            href="javascript:alert('screen was clicked');">
                    <area shape="rect" coords="262,218,0,156" alt="keyboard" 
                            href="javascript:alert('keyboard was clicked');">
                    <area shape="circle" coords="267,234,22" alt="mouse" 
                            href="javascript:alert('mouse was clicked');">
                    </map>