What Are Behaviors?

Behaviors will allow you to add interactivity and to facilitate navigation.

A behavior, like an object, is a snippet of code that gets inserted into a Dreamweaver document when the user chooses one from the behaviors list, a behavior adds JavaScript code.

A behavior inserts two pieces of code—a function (in the document head) and a
function call (in the body section, wherever the cursor is when the behavior is chosen).

You are visualizing a layer that was hidden.


If you move the cursor off the image the layer will be hidden.

The image has two behaviors associated to show and hide the layer.

The Behavior panel can be opened through the Window menu, and then the Behaviors option, also by pressing Shift+F3.

In this panel you need to click on the button, and in Show events for selecting a version from the browser list. Some behaviors don't work with some browsers, depending on the selected browser you will see or not see some possible behaviors. There are many behaviors for Internet Explorer but they don't work with Netscape. Once the browser is selected its not necessary to re-select it the following time you want to insert any behavior. When there is an established browser, you can insert behaviors. The first thing to do is to select the object on which the behavior is going to be applied; it can be an image, a text fragment, etc. When you click on the button of Behavior panel you will see the Show Events for option, through it is the same you had selected the browser. Also, you see a list of all possible actions in the browser previously selected, or you can select one. Depending on the element on which you want to apply the behavior, you can select some actions, and others not. To clear any behavior, you need to select it in Behaviors panel and click on the button. You can also change the order of the behaviors applied to an object, by selecting them and arranging their order through the buttons.

Multiple rollovers

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 "sphere_up" , image"button1_up" and "button2_up" where you want them to be on your page.

(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).