Create Rollover Image Tutorial
Dreamweaver
Objective: To create a Rollover Image

---

Introduction: A rollover image 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 must be the same size; if the images are not the same size, Dreamweaver will automatically resize the second image to match the properties of the first image. Educators can use rollover images to make their personal, department, or school web pages more dynamic.

---

Skill Practice: Create Rollover Image

Step 1: Open . A new document should automatically open in your document window. Or, go to File > Open to open an existing Dreamweaver document.

Step 2: Move the cursor to the point in the document where you want the rollover image inserted.

Step 3: Go to Insert > Rollover Image. The "Insert Rollover Image" window will appear on screen.



Step 4: In the "Insert" box, type in a name for the image, such as "Jayhawk". To fill the "Original Image" text box, click on the button to the right of the text box. The "Original Image" box will appear on screen, which will allow you to browse your computer files for the first image you want to use with your Rollover Image.

Step 5: Use the option again to choose your "Rollover Image" - the image that will show on screen when you "roll" the cursor over the original image. Finally, type in the URL (web address) for the web site you want to link the Rollover Image to in the "When Clicked, Go to URL" text box.

Step 6: When finished, click on the button. The Rollover Image will appear in your document at location you specified.

Step 7: "Click" on your Rollover Image to make sure the hyperlink is functioning properly.