| Depr. | Version |
|---|---|
| No | HTML 3.2 |
| IE5.5+ | FF1+ | SA1.3+ | OP9.2+ | CH2+ |
|---|---|---|---|---|
| Full | Full | Full | Full | Full |
Syntax
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.
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.