Behaviors Overview

You can create a behavior easily in Dreamweaver by attaching a Javascript action to an event on your Web page. A popular behavior for Web pages is a mouseover (rollover) effect. When a visitor moves the cursor over an image, the image changes, and when the mouse is moved away from the image, it returns to its original state.

On the top right corner of this page, the WebCentral logo uses two rollover behaviors. The W changes color when you mouseover it (indicating a link back to the WebCentral home page). Move the cursor over the logo and watch what happens. Now move the cursor away from the logo and watch what happens. Additionally, the word "learning" has an associated mouseover behavior indicating a link back to the WebCentral Learning page.

In the case of a mouseover, the event is the movement of the mouse over the image, and the action is the image changing state. A mouseover actually consists of two events and two actions. When the mouse moves off the image, this is another event which triggers another action (the image returning to its original state).

Sound complicated? Technically it is. But then again, that's why we are learning Dreamweaver, because Dreamweaver makes it easy to do complicated behaviors on your Web pages.

Let's first look at how to insert a simple mouseover onto your page.