RARITAN VALLEY COMMUNITY COLLEGE

Web Page Development
Birte Nebeker
Client-Side Image Map Exercise


  1. Start with this image. Save it to disk as imagemap.gif.

  2. Then create three Web pages with the filenames:
    1. rvccinfo.htm
    2. courses.htm
    3. news.htm
    Make up the content of the pages. It can be just one line.

  3. Create a fourth Web page named rvcc.htm with the following code:

    <html>
    <head>
    <title>Image Map Exercise</title>
    </head>
    <body>
    <img src="imagemap.gif" usemap="#rvcc">
    <map name="rvcc">
    <area shape="rect" coords="x,y,x,y" href="rvccinfo.htm">
    <area shape="rect" coords="x,y,x,y" href="courses.htm">
    <area shape="rect" coords="x,y,x,y" href="news.htm">
    </map>
    </body>
    </html>

  4. Open the image file imagemap.gif in Paint Shop Pro. Get the coordinates for the three rectangles: Position the mouse pointer in the upper left corner of the first rectangle. Note the x,y coordinates in the status line at the bottom. Then position the mouse pointer in the lower right corner of the first rectangle. Note the x,y coordinates. Repeat these steps for the other two rectangles.

  5. Insert the values in the image Web page (rvcc.htm). Then open the Web page in Netscape and test it.
Birte Nebeker, Raritan Valley Community College
Created 1997
Last modified: