coords attribute tells the browser the shape of the
hotspot. Its use depends on the type of
being applied, as detailed below.
attribute defines the top-left and bottom-right coordinates for a
<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>
The values that are used in the
coords attribute are as follows:
- For rectangular shapes (
coordsattribute 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 down from the image’s top-left 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.
It causes no compatibility issues, and has excellent support across all tested browsers.