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.
- Create a blank Web page, imap.htm, in your scratch folder.
Insert the WCBANNER.GIF image from the College's home page into your
- Save the page, but don't exit from the editor.
- 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:
If your ``hot area'' is a circle you need:
- X, Y coordinates of upper-left (ul) corner.
- X, Y coordinates of lower-right (lr) corner.
- X, Y coordinates of center (c) of circle.
- 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:
Record all the coordinates. You can close Paint Shop Pro.
- The Westminster College sign ( rect).
- Each of the three students to the right of Old Main (
- Open your page in notepad by opening the View menu and
choosing Edit Document Source.
- Following the IMG tag for the image, add a pair of tags for an
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.
- Within the IMG tag for the image, add the attribute:
Again, replace mapName with the name you chose. Note that this
creates a target link to the map (don't forget to type the
may also want to add the attribute:
so that there is no border surrounding the image.
- 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,
<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.
- Your HTML source should now look something like this:
<img src="wcbanner.gif" ... usemap="#mapName" border=0>
- 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.
- Load the page into the browser and test the ``hot areas.''
Thomas P. Kelliher
Mon Jan 27 10:19:43 EST 1997