How to Create a Mouse-Over Effect With Dreamweaverby Contributor
How to Create a Mouse-Over Effect With Dreamweaver. A "mouse-over" effect occurs when a user moves the mouse pointer onto an image. When the pointer rests on the image, it changes to something else. This is especially useful for navigation buttons. Dreamweaver 3.0 has mouse-over commands ready for you to set up!
Start Dreamweaver and open the page the mouse-over effect will be located on.
Open the Insert menu and select Rollover Image. A dialog box will appear.
Type the name of the image to be rolled over in the first box. For example, you might call a Home Page button Home Rollover.
In the next box, type the location of the image that will appear on the page. Click Browse to choose an image from your hard disk.
In the Rollover Image box, type the location of the image that will be appear when the mouse hovers over the image. Click Browse to choose an image from your hard disk.
If the image is clickable (linked), type the Web address in the next box. Click OK.
Save the page when finished.
Test the mouse-over by choosing Preview in Browser from the File menu. Hover your mouse over the image to see the new image take its place.
- check Make sure the Preload Rollover Image box is checked. This ensure the images used in the mouse-over are loaded into the Web site before the user has a chance to hover over the base image, reducing the chance of errors.
- check Both images must be the same size.