Rollover

A rollover is an image that, when viewed in a browser, changes when the pointer moves across it.

To set the Image Rollover dialog box options:

1. In the Image Name text box, type a name for the rollover.
2. 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.
3. 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.
4. 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.
5. (Optional) In Alternate Text, enter text to describe the image for viewers using a text-only browser.
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.

   NOTE

   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.

Creating a rollover image

You can insert rollover images in your page. A rollover is an image that, when viewed in a browser, changes when the pointer moves across it.

Before you begin, obtain one or more pairs of images for the rollover. You create a rollover with two image files: 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.

Rollover images are automatically set to respond to the onMouseOver event.

To create a rollover:

1. In the Document window, place the insertion point where you want the rollover to appear.
2. Insert the rollover using one of these methods:
   • In the Insert bar, select Common, then click the Rollover Image icon.
   • In the Insert bar, select Common, then drag the Rollover Image icon to the desired location in the Document window.
   • Select Insert > Interactive Images > Rollover Image.

     The Insert Rollover Image dialog box appears.

3. Complete the dialog box.
4. Click OK.
5. Select File > Preview in Browser or press F12.

   You cannot see the effect of a rollover image in Design view.

6. In the browser, move the pointer over the original image.

   The display should switch to the rollover image.

Swap Image

The Swap Image action swaps one image for another by changing the src attribute of the img tag. Use this action to create button rollovers and other image effects (including swapping more than one image at a time). Inserting a rollover image automatically adds a Swap Image behavior to your page.

To use the Swap Image action:

1. Select Insert > Image or click the Image button on the Insert bar to insert an image.
2. In the Property inspector, enter a name for the image in the leftmost text box.

   The Swap Image action still works if you do not name your images; it names unnamed images automatically when you attach the behavior to an object. However, it is easier to distinguish images in the Swap Image dialog box if all of the images are named beforehand.

3. Repeat steps 1 and 2 to insert additional images.
4. Select an object (generally the image you’re going to swap) and open the Behaviors panel.
5. Click the Plus (+) button and select Swap Image from the Actions pop-up menu.
6. From the Images list, select the image whose source you want to change.
7. Click Browse to select the new image file, or enter the path and filename of the new image in the Set Source To text box.
8. Repeat steps 6 and 7 for any additional images you want to change. Use the same Swap Image action for all the images you want to change at once; otherwise, the corresponding Swap Image Restore action won’t restore all of them.
9. Select the Preload Images option to load the new images into the browser’s cache when the page is loaded.

   This prevents delays caused by downloading when it is time for the images to appear.

10. Click OK.
11. Check that the default event is the one you want.

    If it isn’t, select another event from the pop-up menu. If the events you want are not listed, change the target browser in the Show Events For pop-up menu.