How to Create a Mouse-Over Effect With Dreamweaver

by eHow 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.
  • check A mouse-over is part of a group of actions called "behaviors" in Dreamweaver. Behaviors, which are events (such as positioning the mouse) that trigger actions (such as displaying a new image), are made up of small pieces of JavaScript code that tell the browser to perform a function. For more on JavaScript, see "How to Learn About JavaScript" and "How to Add JavaScript to a Web Page with Dreamweaver," under Related eHows.

Items you will need

About the Author

This article was created by a professional writer and edited by experienced copy editors, both qualified members of the Demand Media Studios community. All articles go through an editorial process that includes subject matter guidelines, plagiarism review, fact-checking, and other steps in an effort to provide reliable information.