coords (HTML attribute)
| Depr. | Version |
|---|---|
| No | HTML 3.2 |
| IE5.5+ | FF1+ | Saf1.3+ | Op9.2+ |
|---|---|---|---|
| Full | Full | Full | Full |
coords="coordinates"
Example
This coords
attribute defines the top-left and bottom-right coordinates for a
rectangular shape:
<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>
Description
The
coords attribute tells the browser the shape of the
hotspot. Its use depends on the type of shape that’s
being applied, as detailed below.
Value
The values that are used in the
coords attribute are as follows:
- For rectangular shapes (
"rect"), thecoordsattribute will take four values: x1, y1, x2, and y2. These values define the top-left corner of the rectangle (how many pixels along and down from the image’s top-left corner the boundary will appear), and the bottom-right corner (how many pixels along and up from the image’s bottom-right corner the boundary will appear). - For circular shapes (
"circ"), three values are required: x, y, and r. The x and y coordinates tell the browser where the circle’s center point is, while the r value specifies the radius of the circle. - Polygonal shapes (
"poly"), which are almost always created using a WYSIWYG HTML editor such as Dreamweaver, are defined by a series of x, y coordinates, each of which relates to a point on the polygon’s outline.
Compatibility
| IE | 5.5 | Full |
|---|---|---|
| 6.0 | Full | |
| 7.0 | Full | |
| Firefox | 1.0 | Full |
| 1.5 | Full | |
| 2.0 | Full | |
| Safari | 1.3 | Full |
| 2.0 | Full | |
| 3.0 | Full | |
| Opera | 9.2 | Full |
| 9.5 | 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.
