shape (HTML attribute)

Spec
Depr. Version
No HTML 3.2
Browser support (more…)
IE5.5+ FF1+ SA1.3+ OP9.2+ CH2+
Full Full Full Full Full

Syntax

shape=" { circle | default | poly | rect } "

Description

The shape attribute allows the author to define some simple area hotspots, using "rect" or "default" for rectangles, and "circle" or "poly" for more complex polygon shapes. The coords attribute will differ depending on the type of shape that’s specified; "circle" is the simplest, as it requires just three values, while "poly" is the most complex, as any number of coordinates may be specified for it.

Example

This shape attribute is set to "rect", for rectangle:

<map name="bigthings" id="bigthings">
  <area shape="rect" coords="35,4,205,108"
      href="http://en.wikipedia.org/wiki/Australia's_Big_Things"
      alt="Australia's Big Things (on Wikipedia)"/>
  ⋮
</map>
<p><img src="giant-prawn.jpg" alt="The Giant Prawn at Ballina"
border="0" usemap="#bigthings"/></p>

Value

"circle", "default", "poly", and "rect" are the W3C-approved attribute values, but some browsers will also recognize variants of these, namely the abbreviated "circ", and the expanded "polygon" and "rectangle". It’s best to stick to the approved attribute values, though.

Compatibility

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
Full Full Full Full Full Full Full Full Full Full Full Full Full Full Full Full Full

It causes no compatibility issues, and has excellent support across all tested browsers.

User-contributed notes

There are no comments yet.

Related Products