Here is the HTML code for the AREAS in the above image
The last line defines the image in the normal way, except that it references an image map: USEMAP="#rectArea" The MAP tags begin with <MAP NAME="rectArea"> which has an end tag </MAP>
Enclosed within the MAP tags are the details of the different AREAs in the MAP.
Each AREA has a NAME, a SHAPE - which can be rect, circ or poly - COORDS and HREF.
The SHAPEs are rectangular, circular or polyganol. The COORDS specify the SHAPE. If the SHAPE isn't mentioned, then a rectangular SHAPE is assumed by the browser.
The coordinates are specified relative to the image. So 0,0 is the top left-hand corner of the image. In the above rectangular image, the first rectangle has the COORDS value of 0,0,100,100 which are the coordinates of the top left and the bottom right corners of the first square.
When clicked, the browser will take the user to the URL specified by the HREF value.
The TITLEs of the different areas replace the ALT text in the image when the mouse moves over the area.
The next example if a circle. Run your mouse over the circle and notice the titles for the different parts of the image and changes in the text area below.
Most Recent Revision: 18-Oct-98.
I am always pleased to hear from you.