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
-
-
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.
-
1
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.
Related Searches
Comments
-
this so good I like it.
-
on dreamweaver can you do mouse hovers over the image and pop up little text info? or maybe other adobe apps?
-
Yes, I like.
-
Thanks, was very helpfull
-
Larry Fike
Jul 14, 2010
I like the fact that you designate the diffulty level as, "Moderate." It is indeed moderately difficult.
