AREA - Client-side imagemap hotspot

This element is also available in our updated HTML 4 reference. Some characteristics may have changed.

Appearance:	<AREA SHAPE=x HREF=`URL` COORDS=`string` ALT=`string`>
Attributes:	SHAPE=rect\|circle\|poly, COORDS=`string`, NOHREF\|HREF=`URL`, ALT=`string`
Contents:	None (Empty).
May occur in:	MAP.

Inside the MAP tag, each "hotzone" in the client-side imagemap is defined with an AREA tag. The HREF attribute specifies the URL for the destination that should be chosen if this area was selected. If you specify NOHREF instead, this area won't do anything.

SHAPE and COORDS define the actual region. SHAPE can be a rectangle, circle, or polygon, and COORDS should contain a set of coordinates describing that shape. This is done with a comma separated list of numbers, enclosed in quotes. The syntax for COORDS depends on what shape you choose.

rect - rectangle: A rectangle has four coordinates. The first specifies the top left corner, and the second the bottom right corner of the rectangle. For example, <AREA SHAPE=rect COORDS="0,0,9,9"> would specify a rectangle of 10x10 pixels, starting in the top left corner of the image.
circle - circle: A circle is defined by its center and radius. The COORDS attribute first specifies the coordinates of the center, and then the radius of the circle, in pixels. For example, <AREA SHAPE=circle COORDS="10,10,5"> would specify a circle with radius 5 at location (10,10) in the image.
poly - polygon: A polygon is built up by a list of coordinates. They are all connected in the order you present, and the last coordinate pair is connected to the first. This way you can build arbitrary figures. For example, <AREA SHAPE=poly COORDS="10,50,15,20,20,50"> would specify a triangle, with edge locations (10,50), (15,20) and (20,50).

The ALT text is used by text browsers to present the URLs in the imagemap in a more readable fashion. If you leave those off, the browser can only display the "bare" URLs. The ALT text is required if you want your document to be valid.

Notes:

Coordinates are specified in X,Y order: COORDS="1,0,10,19" means from X=1, Y=0 to X=10, Y=19. The top left corner is (0,0).
If you have an area which should not do anything, use NOHREF.
Just like with IMG, there can be no markup inside the ALT attribute.

HTML 3.2 Reference ~ Elements by Function ~ Elements Alphabetically

Home, Forums, Reference, Tools, FAQs, Articles, Design, Links