CPSC 110: Project #4

This project has you work with rollover images and an image map.

Create a new Web page named images.htm.

Rollover Images for Navigation

For this part of the assignment, you will use rollover images for navigation simliar to Calvin's home page. Use that page as a model.

At the top of the current Web page, you will create a navigation bar that links to three other pages: your home page index.htm, your schedule schedule.htm, and your biography bio.htm.

In a paint program, create six images, two for each menu item. One version of the menu item should be plain, perhaps white text on a dark background. The other version of the menu item should be more distinctive, perhaps bright red text on the same dark background.

Make sure that each image is the same height as the others, and that paired images have the same width.

At the top of images.htm, add three rollover images right next to each other that use the six images you created in the paint program. Each "menu item" should be linked to the corresponding page.

When you view this page, the menu items should change as you move the mouse cursor over them. When you click them, you should go to the appropriate page.

Image Maps

Another way to use an image for navigation is to create an image map. Image maps are discussed starting on page 107 of our text book.

Use an existing picture, and load it into a paint program. (An obvious choice for this assignment would be a picture of yourself; if you use the picutre already on your home page, make sure you make a copy first.) In the paint program, add the words "Home Page", "Schedule", and "Biography" or something simliar.

See the home page for the Computer Science Department at Northwestern College. That home page is one image. Your image should look similar (with regards to the words on the left).

Then in images.htm add an image map that uses this picture. Create hotspots for the three "menu items" in the picture. Link each menu item to the obvious page.

Save and publish images.htm.

Turn In

There is nothing you have to physically turn in for this project. If you can get to your page from The Project #4 Page of Links, then you're all set. If the grader cannot access your page from the page of links, you will receive no credit for this assignment. You do not have to include your name, course number (i.e., "110"), section letter, or even "Project #4" on the page since it's all very explicit from the page of links. This project is worth 15 points. See the schedule page for the due date.

Other Projects

Please, please, please, please, please continue working on the email project and thinking about the Web project (especially if you ignored this same warning on Lab #4). The due dates of these projects are hard and fast; the email project must be worked on every week; and the Web project cannot be done the night before.


Schedule page --- Lab #4 --- email project --- Web project


Last modified: Wed Feb 20 09:49:21 EST 2002
This document was prepared with Latte, the best text processing language for the Web.
Every attempt has been made to validate the HTML on this page. Valid HTML 4.0!
© Copyright 2001--2002, Jeremy D. Frens & Calvin College. Permission to copy by any means is granted as long as this copyright is preserved.