Home

Unit 1:
    Overview

Unit 2:
     Basics

Unit 3:
     Advanced

Tabular Data  |  Image Maps  |  Image Rollovers  | Flash Elements

Unit 3: Advanced Dreamweaver Features

Image Rollovers

A rollover is an image that 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 the rollover 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. Here is an example of a simple rollover:

To Create a Rollover:

1. In the Document window, place the insertion point where you want the rollover to appear.
       
2. Insert the rollover by doing one of the following:
   1. In the Objects panel's Common category, click the Insert Rollover Image icon. 
   2. Or, choose Insert > Interactive Images >Rollover Image. The Insert Rollover Image dialog box appears.
            
3. In the Image Name field, type a name for the rollover image (don't use special characters).
              
4. In the Original Image field, click Browse and select the image or type the path of the image you want displayed when the page loads.
             
5. In the Rollover Image field, click Browse and select the image or type the path of the image you want displayed when the pointer rolls over the original image.
            
6. If you want the images preloaded in the browser's cache so they load faster, select the Preload Images option.
                     
7. In the "When Clicked Go to URL" field, click Browse and select the file, or type the path to the file 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.
   
8. Click OK to close the Insert Rollover Image dialog box.

    {back to top}