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

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

shape property (a, area)

Browser support:

Sets or retrieves the shape type of the selectable region for a hypertext or an area.

The shape and coords properties define the position and dimensions of the area together.

Syntax:

object.shape;

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

This property is read/write.

HTML page for this property: shape

Possible values:

String that sets or retrieves the type of the shape.

One of the following values:

circ

The coordinates specified in the coords property define a circle.

circle

The coordinates specified in the coords property define a circle.

poly

The coordinates specified in the coords property define a polygon.

polygon

The coordinates specified in the coords property define a polygon.

rect

The coordinates specified in the coords property define a rectangle.

rectangle

The coordinates specified in the coords property define a rectangle.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the shape attribute:

Click on the shapes and see the location bar.<br /><br />
<img src="area.gif" width="504px" height="126px" border="0px" alt="Solar System" usemap="#SampleMap" />
<map name="SampleMap">
    <area shape="rect" coords="1,-1,83,125" alt="rectangle" href="#rect" />
    <area shape="circle" coords="234,57,30" alt="circle" href="#circle" />
    <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="#poly" />
</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 shape 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>
    Click on the shapes and see the location bar.<br /><br />
    <img src="area.gif" width="504px" height="126px" border="0px" 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>

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