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!

Difficulty: Moderate

Instructions

Things You'll Need:

• Macromedia Dreamweaver

1. Start Dreamweaver and open the page the mouse-over effect will be located on.

2. Open the Insert menu and select Rollover Image. A dialog box will appear.

3. 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.

4. 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.

5. 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.

6. If the image is clickable (linked), type the Web address in the next box. Click OK.

7. Save the page when finished.

8. 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.

Tips & Warnings

• 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.
• Both images must be the same size.
• 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.
• Mouse-overs, like most other JavaScripts, may not work in older browsers. Users will only see the original image.

Who Can Help:

• eFax is the world’s #1 Internet fax service.  Send and receive faxes by email and kiss your fax machine goodbye. 30-Day Free Trial

[nzcreativewebde]

on 5/15/2009 Wow cheers for this little blurb I have wondered how webmasters done rollover buttons etc like this, have bookmarked your page for future reference :).http://www.nzcreativewebdesign.com