The Latest in Adventure Travel

***All Graphic can be found on the shared drive.  Create a folder in your document called “Latest in Adventure Travel”.  Copy all the files from the shared Drive into that folder.

Behaviors are used to add interactivity to your pages, enabling your users to change or control the information they see. A behavior combines a user event (for example, moving the pointer over a graphic button) with an action or series of actions that take place as result of that event. Behaviors are prewritten JavaScript codes you can easily incorporate in your page when using Dreamweaver. You can specify more than one event to trigger a behavior, and more than one action for each event. Dreamweaver includes several predefined behavior actions. If you are proficient with JavaScript, you can add your own behaviors. You can also download new behaviors from the Dreamweaver Exchange Web site by choosing Help > Dreamweaver Exchange. If you have an Internet connection, your primary browser will open and you will be taken directly to the Web site.

The most common use of JavaScript on Web pages is for creating a rollover—an image that changes when the user moves the pointer over the image. You can create button rollovers in Dreamweaver without ever looking at the HTML or JavaScript code.

Here are a few things to remember when designing rollover buttons for your page:

Highlighted Yellow

Insert Rollover Image

Rollover Image Dialog Box

Rollover Buttons

Adding Rollovers to Existing Images

Using the Insert Rollover Image command makes it very easy to insert rollovers in your page. There may be instances where graphics are already placed on the page and you want to add rollovers. You could delete the graphics and use the Insert Rollover Image command to put them back on the page, but there is a possibility of changing the page design, especially if the graphics are in a table. In the next exercise, you will add rollovers to the buttons across the top of the page.

Select the Adventure Gear image and type gear in the Property inspector Name text box. Notice that you see the image that is selected and the size at the properties panel.:

Image Name

Swap Image

In the Swap Image dialog box, click Browse and select the Ad_gear_f2.gif image you downloaded earlier to your student folder. Click Select (Windows) or Open (Macintosh) and then click OK to close the Swap Image dialog box.

Swap Button 1

Understanding Events

After you select an action, Dreamweaver adds that action to the Behaviors panel list box. Dreamweaver also adds an appropriate event (or events) for that action. The event is what causes the action to occur; for example, an event could be the user clicking a button. The action is the result of the user interaction. If you want to change the event, select the event in the Behaviors panel and then pick a new one from the pop-up menu (the arrow) to the right of the event (see Figure 5-6). The events in the pop-up menu might change depending on the action and the browser type you choose. The Events pop-up menu appears only after you add an action and select the event.

Adding Several Actions to an Object

After you define a user event, you can attach several actions to that event. To add another event, select the object with the first event and use the Behaviors panel to add another action. To change the order in which the actions are executed, use the up arrow or down arrow in the Behaviors panel.

For the next exercise you want two images to swap when the user rolls over the buttons on the left. You already have one of the rollovers done. Two actions need to occur on the same onMouseOver event. Instead of adding a new action, you edit the existing Swap Image action and add a new swap image. The graphics should have been downloaded from the graphics zip file.

Welcome Graphic

Text

Biking Image

Swap Image Action

Select Text