The address for this web page is:   http://fishcaro.crosswinds.net/day_30_creating_imagemaps.htm
On to the next lesson!
Back to the COURSE SYLLABUS

30. CREATING IMAGEMAPS

You will need 3 index cards (6 sides) for this lesson.

INDEX CARDS #30:

STRUCTURE: CLIENT-SIDE IMAGEMAP (30a)

Client-side imagemaps require three components:
--An image that users will "click on" to go to different places
--A <MAP> </MAP> container: which pieces of your image get sent to which URLs?
--The USEMAP attribute within the <IMG> tag that tells which MAP to USE.
Here's the basic structure:
<IMG SRC="image_to_be_clicked" 
     WIDTH="#_of_pixels" HEIGHT="#_of_pixels" 
     ALT="alternate_text_for_nongraphical_browsers"
     USEMAP="#name_of_map">
<MAP NAME="name_of_map">
   <AREA SHAPE="rect|rectangle|circ|circle|poly|polygon"
         COORDS="pixel_coordinates_for_shape"
         ALT="alternate_text_for_nongraphical_browsers"
         HREF="URL_for_hotspot"        (or:  NOHREF)
         TITLE="to_be_displayed_when_mouse_is_over_hotspot">
    (use_one_AREA_tag_for_each_hotspot)    </MAP>

SAMPLE CLIENT-SIDE IMAGEMAP (30b)

The imagemap produced by the following sample code is shown after this index card:
<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>


a rectangle,
circle, and triangle
packing rectangles into a square circles through points a proof of the Pythagorean Theorem

ATTRIBUTES FOR THE IMG TAG (30c)

  • 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.

ATTRIBUTES FOR THE AREA TAG (30d)

  • 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.


SHAPES: RECTANGLES and CIRCLES (30e)

All coordinates are given in pixels, and are measured from the upper-left-corner of the image being used for the imagemap. The positive x-direction is TO THE RIGHT; the positive y-direction is DOWN.
In the sample imagemap above, each dark line represents 40 pixels. Look back at this example as you read through the following descriptions:
  • 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.
NOTE: ALL COORDINATES MUST BE WHOLE NUMBERS (0, 1, 2, 3, ...)

SHAPES: POLYGONS (30f)

All coordinates are given in pixels, and are measured from the upper-left-corner of the image being used for the imagemap. The positive x-direction is TO THE RIGHT; the positive y-direction is DOWN.
In the sample imagemap above, each dark line represents 40 pixels. Look back at this example as you read through the following descriptions:
  • 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.
NOTE: ALL COORDINATES MUST BE WHOLE NUMBERS (0, 1, 2, 3, ...)

Printable version of Index Card 30a

Printable version of Index Card 30b

Printable version of Index Card 30c

Printable version of Index Card 30d

Printable version of Index Card 30e

Printable version of Index Card 30f

WORKSHEET #30:

ASSIGNMENT #30:

On to the next lesson!
Back to the COURSE SYLLABUS
© 2000 Carol J.V. Fisher    All Rights Reserved