Adding Rollover Effects

Creating a rollover image:
A rollover is an image that, when viewed in a browser, changes when the pointer moves across it. A rollover actually consists of two images: the primary image (the image displayed when the page first loads) and a secondary image (the image that appears when the pointer moves over the primary image). Both images in a rollover should be the same size; if the images are not the same size, Dreamweaver automatically resizes the second image to match the properties of the first image.

You cannot see the effect of a rollover image in the Dreamweaver Document window. To see the rollover effect, press F12 to preview the page in a browser, then roll the pointer over the image to try the effect.

Rollover images are automatically set to respond to the onMouseOver event. For information about setting an image to respond to a different event (for example, a mouse click) or about editing a rollover to display a different image, you will have to use a Swap Image behavior.

A more complex form of rollover image is a navigation bar. To create a navigation bar, use the INSERT/INTERACTIVE IMAGES/NAVIGATION BAR command.

To create a rollover:

1. In the Document window, place the insertion point where you want the rollover to appear.

Insert the rollover using one of these methods:
a. In the Insert bar, select Common, then click the Rollover Image icon. (See image above)
b. In the Insert bar, select Common, then drag the Rollover Image icon to the desired location in the Document window.
c. Choose Insert /Interactive Images /Rollover Image.

1. The INSERT ROLLOVER IMAGE dialog box appears. (See image above)
2. In the Image Name text box, type a name for the rollover.
3. In the Original Image text box, click Browse and select the image you want displayed when the page loads, or enter the image file’s path in the text box.
4. In the Rollover Image text box, click Browse and select the image you want displayed when the pointer rolls over the original image, or enter the image file’s path in the text box.
5. If you want the images preloaded in the browser’s cache so no delay occurs when the user rolls the pointer over the image, select the Preload Images option.
   In Alternate Text, enter text to describe the image for viewers using a text-only browser. (optional)
6. In the When Clicked Go to URL text box, click Browse and select the file, or type the path to the file that you want to open when a user clicks the rollover image.
   If you don’t set a link for the image, Dreamweaver inserts a null link (#) in the HTML source code to which the rollover behavior is attached. If you remove the null link, the rollover image will no longer work.
7. Click OK to close the Insert Rollover Image dialog box.
8. Choose FILE/PREVIEW IN BROWSER or press F12.
9. In the browser, move the pointer over the original image.