How to Create Mouse Over Animation on Dreamweaver

Create a mouse over animation in Dreamweaver.

Mouse-over animations, also known as rollovers, change the appearance of a graphic, usually a button, on a Web page when the user hovers her mouse cursor over the graphic. This effect is usually created with two versions of the graphic -- the Up-state version which is the normal button state and the Over-state version which displays when the cursor hovers over the image. You can create rollovers in Adobe Dreamweaver, a Web page design program, with the program's Rollover Image feature.

Things You'll Need

• Adobe Dreamweaver CS2 or later
• Two versions of the same graphic, one for the Up state and one for the Over-state.

Instructions

1. Open the Dreamweaver HTML file containing the image you want to make a rollover or start a new HTML page by clicking the "File" menu and choosing "New." This opens the New Document dialog box. Choose "HTML" from the Type list and the desired layout from the Layout list, then click the "Create" button.

2. Click the "File" menu and choose "Save As." This opens the Save As dialog box. Name and save the page.

3. Click in the page where you want to create a rollover.

4. Click the "Insert" menu, choose "Image Objects, then select "Rollover Image" from the fly out menu. This opens the Insert Rollover Image dialog box.

5. Click the "Browse" button next to the "Original Image" field. This opens the Original Image dialog box. Navigate to the Up-state graphic, select it, then choose "OK."

   You can create your Up and Over graphics in a graphics editor such as Adobe Photoshop or you can download button-state pairs from one of several sites on the Internet that offer free button graphics.

6. Click the "Browse" button next to the "Rollover Image" field. This opens the Rollover Image dialog box. Navigate to the Over-state graphic, select it, then choose "OK."

7. Type the URL for this button in the "When Clicked, Go to URL" field. This is the Web page you want to load when the user clicks the button.

8. Click the "Live View" button located beneath the menu bar. Turning on Live View allows you to test the rollover.

9. Hover the mouse cursor over the graphic to see the mouse-over effect.

Tips & Warnings

• When you upload this Web page to a Web server don't forget to upload both images. Otherwise your rollover effect will not work.

References

• Adobe: Create a Rollover Image
• Smart Webby: Rollover Effect for Images and Buttons
• YouTube; DreamWeaver Tutorial 2 - How to Make a Rollover Image; TheTutorialArena; May 2010

Resources

• Adobe:Apply the Swap Image Behavior