30. CREATING IMAGEMAPS

<IMG SRC="graphics/shapes.gif" BORDER=5 USEMAP="#geometric_shapes"
     HEIGHT=240  WIDTH=200  ALT="a rectangle, circle, and triangle">
<MAP NAME="geometric_shapes">
  <AREA SHAPE="rect" ALT="packing rectangles into a square" 
        COORDS="40,40,160,120" 
        HREF="address_for_rectangle_goes_here" 
        TITLE="packing rectangles into a square">
  <AREA SHAPE="circle" ALT="circles through points" 
        COORDS="160,200,40" 
        HREF="address_for_circle_goes_here" 
        TITLE="circles through points">
  <AREA SHAPE="poly" alt="a proof of the Pythagorean Theorem" 
        COORDS="0,120,80,200,0,200" 
        HREF="address_for_triangle_goes_here" 
        TITLE="a proof of the Pythagorean Theorem">
</MAP>

• The SRC, BORDER, HEIGHT, WIDTH, and ALT attributes have already been discussed: review Lesson 12, Lesson 13, and Lesson 14. The order that the attributes are listed doesn't matter. The only new attribute is USEMAP.
• The <MAP NAME="geometric_shapes"> tag assigns the name "geometric_shapes" to the map. Then, the USEMAP="#geometric_shapes" attribute within the <IMG> tag says to use the named map.
• The hash symbol (#) symbol is required when referring to the named map. Remember when we talked about named anchors in Lesson 11? We learned that the hash symbol (#) is put before the named fragment when you link within a document. The same idea is being used here—we're naming a map within the document, and then referring to this named map.
• The <IMG> tag goes where you want the image to be. However, the <MAP> </MAP> container can go anywhere. I usually put it directly after the <IMG> tag. Some people (and programs) put it at the very end.

• SHAPE="rect|rectangle|circ|circle|poly|polygon" COORDS="pixel_coordinates_for_shape"
  There are three possible shapes for "hot-spots": rectangles ("rect" or "rectangle"); circles ("circ" or "circle"); polygons ("poly" or "polygon"). See (30e) and (30f).
• ALT="alternate_text_for_nongraphical_browsers"
  Provides descriptive text that will appear whenever the graphic is unavailable.
• TITLE="to_be_displayed_when_mouse_is_over_hotspot"
  As you move your mouse over each "hot-spot," this text appears; you probably want it to give a clue to the action that will be taken if the hot-spot is clicked.
• HREF="URL_for_hotspot"
  Answers the question: Where should the user go if this region is clicked?
• There is one AREA tag for each "hot-spot."
• When a user clicks on a hot-spot, the browser passes the coordinates of the mouse pointer to the map, which then selects the appropriate link. If hot-spots overlap, and a user clicks on the overlap area, then the FIRST AREA TAG THAT INCLUDES THE SELECTED COORDINATES will be used.

• SHAPE="rect" COORDS="x1,y1,x2,y2"
(x1,y1) is the upper-left-corner of the rectangle.
  (x2,y2) is the lower-right-corner of the rectangle.
• SHAPE="circ" COORDS="xc,yc,r"
(xc,yc) is the center of the circle.
  r  is the radius of the circle.

• SHAPE="poly" COORDS="x1,y1,x2,y2,x3,y3..."
  The figure is formed as follows: an imaginary line is drawn from (x1,y1) to (x2,y2) to (x3,y3) etc. An imaginary line is automatically supplied from the last listed point back to the first listed point (to "close" the figure). The "hot-spot" is the interior (inside) of the resulting figure.