Creating a Rollover Image in Dreamweaver CS3

In Dreamweaver, Rollover images — as the name implies — are designed to react when someone rolls a cursor over an image. The effect can be as dramatic as a picture of a dog being replaced by a picture of a lion, or as subtle as the color of a word changing as one image replaces another. Either way, Dreamweaver includes a special dialog box for rollovers that makes creating a simple rollover effect one of the easiest behaviors to apply.

To create a rollover image by using Dreamweaver's Insert Image Rollover dialog box, follow these steps:

1. Click to place your cursor on the page where you want the rollover to appear.

Rollover effects require at least two images: one for the initial state and one for the rollover state. You can use two different images or two similar ones, but they both should have the same dimensions. Otherwise, you get some strange scaling effects because both images must be displayed in exactly the same space on the page.

2. Choose Insert --> Image Objects --> Rollover Image.

The Insert Rollover Image dialog box appears.

3. In the Image Name box, name your image.

Before you can apply a behavior to an element, such as an image, the element must have a name so that the behavior script can reference it. You can name elements anything you like as long as you don't use spaces or special characters.

4. In the Original Image box, specify the first image you want visible. Use the Browse button to locate and select the image.

If the images are not already in your site's root folder, Dreamweaver will copy them into your site when you create the rollover.

5. In the Rollover Image box, enter the image you want to become visible when visitors move their cursors over the first image.

Again, you can use the Browse button to locate and select the image.

6. Select the Preload Rollover Image check box to load all rollover images into the browser's cache when the page first loads.

If you don't choose to do this step, your visitors may experience a delay because the second image will not be downloaded until a mouse is rolled over the original image.

7. In the When Clicked, Go to URL box, enter any Web address or browse to locate another page in your site that you want to link to.

If you don't specify a URL, Dreamweaver automatically inserts the # sign as a placeholder.

8. Click OK.

The images are automatically set up as a rollover.

9. Click the globe icon at the top of the workspace to preview your work in a browser and test how the rollover works.

dummies

Source:http://www.dummies.com/how-to/content/creating-a-rollover-image-in-dreamweaver-cs3.html