Create Rollover/MouseOver Effect

Note: This tutorial is done by Macromedia Dreamweaver MX.

This tutorial will teach you how to do a MouseOver effect on your buttons.

1.

Download these two buttons to do this tutorial or use your own buttons if you have one.

2. Open a new page in Dreamweaver, and and press Rollover Image button on the Common panel.

3. After you have clicked the Rollover Image you should see this pop-up window.

Fill in the empty fields with the respective texts. Give your image a name, if it is a menu item such as About Us in our case, give it "About Us" name. Original Image field is the field which should contain your initial image. Rollover Image field should contain your second image which should show when the user MouseOvers. The last two fields are self explanatory.

Once you finish click OK and save your page. Hit F12 to see your page.

4. You can see your rollover actions in Behaviors Panel. Go to Window > Behaviors to open the panel if it is not already open. To edit double click on the actions on the right side.