Introduction
Mouse-over effects are very popular these days and often very eye pleasing for the site visitors. In this tutorial I'm going to teach you step by step, how to use Macromedia Dreamweaver's Behaviors, to make multiple rollovers on your buttons and other images."Why use Dreamweaver, I'm ten times faster with notepad", you say? The fact is, you don't have to code all these complicated JavaScript's by hand, and therefore, save yourself a whole lot of precious time. Because with Dreamweaver it's both easy and time-saving.
If you don't have a copy of the latest version of Dreamweaver you can download a trial version at www.macromedia.com.
Requirements.
Basic knowledge of Dreamweaver 3 or 4. An existing page layout/buttons. Or just use mine.(This tutorial was made using Macromedia Dreamweaver 4.0 on Windows2K)
Step 1: Insert your images
A.
First of all, you have to make your layout or buttons.
I made four buttons and three other images, as you can see.
B.
Open up your copy of Dreamweaver and create a new html file. Before you start, save the file to your hard drive.
C. Insert "button1_up" and "button2_up" where you want them to be on your page and do the same with the "sphere_up" image.
(Use the "insert image" button to insert the images)
Step 2: Naming your images.
A. Click on the "button1_up" image and give it a name in the Property panel. Do the same thing with the other 2 images.
Just call them:
button1_up = button1
button2_up = button2
sphere_up = sphereup
B. Open up your Behaviors property window. ( Shift+F3 or "Window -> Behaviors" )
Step 3: Applying the behaviors
A.Select "button1_up" by clicking on it.
B.
Click on the "+" button in the Behavior window and a dropdown menu will appear.
C.
Select the "Swap Image" command, and wait for the Swap Image pop up window to appear.
D.
Now we are going to apply the behaviors on the first button.
Click the "Browse" button and select "button1_over.jpg".
Then click the ok button on the "browse for image window".
Make sure that the "Preload images and Restore images onMouseOut" are selected.
(They should be on by default).
E.
After you have done that, select the "sphereup" image in the "images" window.
Browse for the right picture, wich in this case is "sphere1.jpg" and be sure to have "preload images and restore images onMouseOut" selected like before.
Then click OK.
F. Now it should look like this:
G. Repeat Step no. 03 "A - E" on "button2_up" using the 2 remaining images (button2_over.jpg & sphere2.jpg).
The end result:
If this has turned out successfully, the animation should look like this when you view it in your browser (press F12 to preview).You can find more Dreamweaver tutorials at tutorialvault.net