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>
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>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content