A Brief Look at JavaScript - Web Development and Design Foundations with XHTML - page 571

Hands-On Practice Case
1. Add rollover images for the navigation images to each Fish Creek Web site page.
When a visitor places the mouse over one of the navigation images, the image
will change—this is an image rollover. In this case study you will add image
rollovers to all the pages on the Fish Creek site.
a. Your home page (index.html in the fishcreekcss folder) should already display
the logo (fishcreeklogo.gif) and navigation images (home.gif, services.gif,
askthevet.gif, contact.gif). If it doesn't, obtain the logo and navigation images
from the student files (Chaper14/CaseStudyStarters folder) and save them to
your fishcreekcss folder. Use Figure 14.25 as a guide. The images should each
link to their corresponding pages.
Figure 14.25
Fish Creek Animal
Hospital index.html
page with rollover
image for the
services link and
date last modified in
the footer
b. Copy the new images for this case from the student files (Chapter14/
CaseStudyStarters folder) and save them to your fishcreekcss folder. These are the
images that will display when the user places the mouse pointer over one of the
images links: serviceson.gif, asktheveton.gif, contacton.gif, and homeon.gif.
c. Modify the index.html page to use JavaScript onmouseover and onmouseout
event handlers.
Add the name attribute to each image used for navigation. For example, the
<img /> tag for the Services image should be modified as follows:
<img border="0" src="services.gif" alt="Fish Creek Services"
width="132" height="27" name="services" />
Modify the Home, Ask the Vet, and Contact <img /> tags similarly. The value
of the name attribute should not contain any spaces.
Add onmouseover and onmouseout event handlers to each image hypertext
link. The event handlers will change the src attribute on the image to a new