new page | color | tables | typography | linking | images | navigation | publishing
Rollovers
Rollovers are a popular way to create navigation bars. A rollover is just a combination of two images - one as the "up state" and one as the "over state". To use the rollover feature, you will need to create your own images. These images can be created in programs like photoshop and paint shop pro, or you can even visit a site like Acme Labelmaker to create buttons. Using a web site to create a button gives you less options than if you do it yourself using software like photoshop.
In this example, a rollover will be created to go to the index page of the Cyberspace and Society website using buttons created on the Acme Labelmaker web site. Here are the two buttons (right-click and save to try the example)
1 - Decide where you want to begin your navigation bar and place your insertion point in that spot. Note: you should have a row or column in a table set aside to hold your navigation bar as described in the table section of this lab.
2 - Click insert...image objects...rollover image using your menu bar. The following dialog box will appear:
Image name - type in an image name that makes sense for the button - in this case home would be good
Original image - use the browse button to find the image you want to use as the up state - in this example the black button named dl4_dw_rollover_up.gif will be the original image
Rollover image - use the browse button to find the image you want to use as the over state - in this example the red button named dl4_dw_rollover_over.gif will be the original image
Check box - leave the check mark in the box to force the images to preload before using the rollover
Alternate text - some web surfers turn images off - type in alternate text if you want text to appear where the image would have appeared
When clicked, URL - type in the external address or browse to the internal file you wish to link to when the button is clicked. In this example the link will go to http://www.temple.edu/cybersociety
Here is the result:
If you plan on using rollovers to create a navigation system, it is a good idea to create the navigation bar in its entirety and then copy and paste the buttons to each page in which you need the navigation bar.