Image Maps

CS 297

Jan. 27, 1997

If you have questions regarding how to do something, call me over. Nothing needs to be handed-in, nor do you need to print anything. Questions will be forthcoming.

1. Create a blank Web page, imap.htm, in your scratch folder. Insert the WCBANNER.GIF image from the College's home page into your page.

2. Save the page, but don't exit from the editor.

3. Open the image in Paint Shop Pro. We need to determine some pixel coordinates. Note that these are displayed down in the status bar as you move the mouse pointer around over the image. The upper-left corner of the image has the coordinates 0, 0 (X-coordinate, Y-coordinate). If your ``hot area'' is a rectangle you need:
   1. X, Y coordinates of upper-left (ul) corner.

   2. X, Y coordinates of lower-right (lr) corner.

   If your ``hot area'' is a circle you need:
   1. X, Y coordinates of center (c) of circle.

   2. Radius (r) of circle, in pixels.

   This information is needed for each of the ``hot areas'' in the image. For this exercise, measure ``hot areas'' for the following parts of the image:

   1. The Westminster College sign ( rect).

   2. Each of the three students to the right of Old Main ( circle).

   Record all the coordinates. You can close Paint Shop Pro.

4. Open your page in notepad by opening the View menu and choosing Edit Document Source.

5. Following the IMG tag for the image, add a pair of tags for an image map:

   <map name="mapName">
   </map>
   

   Replace mapName with a name of your choosing. This name is a target for the map. Each image map in a page must have a unique name.

6. Within the IMG tag for the image, add the attribute:

   usemap="#mapName"
   

   Again, replace mapName with the name you chose. Note that this creates a target link to the map (don't forget to type the #). You may also want to add the attribute:

   border=0
   

   so that there is no border surrounding the image.

7. Go back to the map tags and add an area tag for each of your ``hot areas.'' Here are the templates for a rectangle and circle, respectively:

   <area shape=rect coords="ulx,uly,lrx,lry" href="URL">
   <area shape=circle coords="cx,cy,r" href="URL">
   

   In these templates, you must replace ulx, uly, lrx, lry, URL, cx, cy, and r with appropriate values. With the exception of URL, these values are the measurements you previously made in Paint Shop Pro. URL is the URL you want associated with the ``hot area.'' Each area tag must be between the <map> and </map> tags.

8. Your HTML source should now look something like this:

   <img src="wcbanner.gif" ...  usemap="#mapName" border=0>
   
   <map name="mapName">
   <area ...>
   <area ...>
   ...
   </map>
   

9. Save your page in notepad. The Netscape editor should ask you if you want to reload the page. Do so. You should see a number of yellow tags on the page now. This is a good sign. It means that if you save the document from the editor, you won't lose your image map. If you don't see these tags, call me over.

10. Load the page into the browser and test the ``hot areas.''