A rollover image is an image whose display modify while the pointer passes ("rolls") over it. You will employ Dreamweaver's Insert Rollover Image command to produce three rollover images for the navigation buttons-Destinations, Trip Planner, and Travel Logs.
A rollover image contains two images: the image displayed while the page loads first in the browser, and the image displayed while the pointer moves on the original image. Be sure to employ images which are the same size. The first image dictates the size of the display, thus if the second image is much smaller or larger, the results will look unprofessional or distorted.
Next, you will insert a navigation button along with a rollover image to your page. After that you will insert the other navigation buttons & preview the page in a browser to test the rollovers.
1. In the Document window, click on the first cell of the navigation button table.
This tells Dreamweaver where you desire the image inserted.
2. To add a rollover image, do one of the following:
- Within the Common category of the Objects panel, click on the Insert Rollover Image icon.
- Select Insert > Interactive Image > Rollover Image.
3. In the Insert Rollover Image dialog box, type planner within the Image Name field.
It gives the image a unique name, & makes it identifiable easily in the HTML code.
4. In the Original Image field click on Browse; after that navigate to MenuTripPlanner.gif and click on Select (Windows) or Open (Macintosh).
This tells Dreamweaver which image to display while the page loads first.
5. In the Rollover Image field click on to Browse; after that navigate to MenuTripPlanner_on.gif & click Select (Windows) or Open (Macintosh). This tells Dreamweaver which image to display while the pointer is onto the original image.
6. Ensure the Preload Rollover Image option is chosen so that the rollover images load while the page loads in the browser, making sure a quick transition among images while a user moves the pointer onto the original image.
7. Click on to OK to close the dialog box.
The image appears in the document.
8. Resize the layout cell to fit the image.