Kent-Drury
English 349

Creating Link & Image Rollovers

Note: To view the behaviors described on this handout, view this page online at http://www.nku.edu/~rkdrury/349/handouts/rollovers.htm.

Changing Link Colors on Rollover

To create rollover links with text (i.e., when the mouse moves over the link, it changes color), use the following procedure:

Example:

Northern Kentucky University

1. Open the page you want to modify in Dreamweaver.
2. Click the "Page Properties" button on the Property inspector (probably at the bottom of the page).
3. Choose the category "Links."
4. For each type of link (Link, Alink, Vlink, Rollover), use the color picker to set the color. If you want to change the default setting that links are underlined (for instance, you may want to have the underlining show up only when the mouse is over the link, or you want all links to be boldface), this is the place to do it.
5. Click "OK."

Image Rollovers

Example:

Rollover images create the illusion that a button has changed because of a user action. In actuality, rollover images swap one image for another when the user performs a particular action. To set up a rollover image when the user moves the mouse over an image:

1. Create/find the two images you want to use for a simple rollover. Save them as part of your site.
2. Open the file in which the rollover image will appear. Position the cursor at the insertion point. Choose Insert>Image Objects>Rollover Image. A popup box will appear.
3. The default name for the image will be in the form "Image#". Change this name to something descriptive that you'll remember.
4. Navigate to your Original image (the one that shows up initially on the page) and your Rollover image (the one that appears when you move your mouse over it).
5. Describe the button in the Alt Text box (this helps to make your site ADD compliant; that is, sight impaired people will not get stuck because they can't see your image).
6. Enter the URL of the site you want to appear when the button is clicked.
7. Click "OK." Preview the result in a browser by clicking File>Preview in Browser>browsername. It should work!

Inserting a Navigation Bar With Button Images

Example: The following instruction was used to produce the navigation bar in the page at http://www.nku.edu/~rkdrury/349/handouts/navigation_bar_example.html

1. In Fireworks, Photoshop, or some other graphics program, create button images for all of the buttons that will appear in your navigation bar. You will need at least an "Up image" and "Over image" for every button. Be certain that you save the images, in "GIF" or "JPG" format, to your site directory.
2. Open a file and position the cursor where you want the navigation bar to appear.
3. Choose Insert>Image Objects>Navigation Bar. The following popup window will appear:
4. In the "Element name" field, enter a descriptive name for the first element in your navigation bar (e.g., "Home").
5. Click in the "Up image" field. Browse to find the up-image for the element.
6. Click in the "Over image" field. Browse to find the over-image for the element.
7. If desired, continue with a "Down image" and an "Over while down image."
8. Add descriptive "Alternate text" to make your page ADD compliant.
9. Enter the complete URL for the page to which the navigation bar element will be linked.
10. Select the option "Preload images."
11. In the "Insert" field, choose either "Horizontally" or "Vertically," depending upon whether you want a vertically stacked navigation bar or a horizontal navigation bar that spreads across the page.
12. Click the "use tables" radio box. The first element in your navigation bar is complete.
13. Click the "+" at the top of the screen, then repeat steps 4-12 for each additional element of your navigation bar.
14. Click OK when all elements have been added to your navigation bar.