In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > HTML DOM > properties > coords (a, area)

coords property (a, area)

Browser support:

Sets or retrieves the position of a shape. You can select the type of shape with the shape property.

Syntax:

object.coords;

You can find the related objects in the Supported by objects section below.

This property is read/write.

HTML page for this property: coords

Possible values:

String that sets or retrieves a comma-separated list of coordinates.

One of the following values:

x, y, r

The shape property must be set to 'circle'. x - center x position, y - center y position, r - radius.

x1, y1, ... xn, yn

The shape property must be set to 'polygon'. The Cartesian coordinates (x1, y1), (x2, y2), ..., (xn, yn) of its vertices, listed in order as the area is circulated in counter-clockwise fashion.

x1, y1, x2, y2

The shape property must be set to 'rectangle'. x1, y1 - are the upper left x,y coordinates, x2, y2 - are the bottom right x,y coordinates of the rectangle.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the coords attribute:

<img src="area.gif" style="width:504px; height:126px; border:none;" alt="Solar System" usemap="#SampleMap" />
<map name="SampleMap">
    <area shape="rect" coords="1,-1,83,125" alt="rectangle" href="#">
    <area shape="circle" coords="234,57,30" alt="circle" href="#">
    <area shape="poly" coords="363,37,380,40,399,35,420,47,426,63,423,78,430,94,409,90,395,92,379,84,371,67,370,57" alt="polygon" href="#">
</map>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the coords property:

<head>
    <script type="text/javascript">
        function GetCoords () {
            var maps = document.getElementsByName ("SampleMap");
            var areas = maps[0].getElementsByTagName ("area");

            for (var i = 0; i < areas.length; i++) {
                var shapeCoords = areas[i].coords;
                var shapeType = areas[i].shape;
                alert ("The " + i + ". shape type is: " + shapeType + 
                        "\n and the coords are :" + shapeCoords);
            }

        }
    </script>
</head>
<body>
    <img src="area.gif" style="width:504px; height:126px; border:none;" alt="Solar System" usemap="#SampleMap" />
    <map name="SampleMap">
        <area shape="rect" coords="1,-1,83,125" alt="rectangle" href="#">
        <area shape="circle" coords="234,57,30" alt="circle" href="#">
        <area shape="poly" coords="363,37,380,40,399,35,420,47,426,63,423,78,430,94,409,90,395,92,379,84,371,67,370,57" alt="polygon" href="#">
    </map>
    Move the mouse pointer over the different shapes to see map areas
    <br />

    <button onclick="GetCoords ();">Get coords!</button>
</body>