15
Adding User Interactivity – Lesson 5 1 Adding User Interactivity Lesson 5

Adding User Interactivity – Lesson 51 Adding User Interactivity Lesson 5

Embed Size (px)

Citation preview

Page 1: Adding User Interactivity – Lesson 51 Adding User Interactivity Lesson 5

Adding User Interactivity – Lesson 5 1

Adding User Interactivity

Lesson 5

Page 2: Adding User Interactivity – Lesson 51 Adding User Interactivity Lesson 5

2 Adding User Interactivity – Lesson 5

Objectives Add user interactivity to your

pages by using behaviors. Create and work with rollovers. Attach behaviors to objects. Modify behaviors. Understand events. Add multiple behaviors to one user

action.

Page 3: Adding User Interactivity – Lesson 51 Adding User Interactivity Lesson 5

3 Adding User Interactivity – Lesson 5

Use behaviors to add interactivity to your site Behaviors add interactivity to a page by enabling

the user to change or control the information they see.

A behavior consists of an event (such as clicking a mouse button) and an action (or multiple actions) that respond to the event.

Behaviors are prewritten using JavaScript code. You can specify more than one event to trigger a

behavior, and you can specify more than one action for each event.

One common use of behaviors is to create rollover buttons.

Page 4: Adding User Interactivity – Lesson 51 Adding User Interactivity Lesson 5

4 Adding User Interactivity – Lesson 5

Add rollover buttons to your page A rollover is an image that changes

appearance when the mouse pointer is moved over the button or when it is clicked.

When creating a rollover image or button: Create each image the same width and height. If

they are not the same size, Dreamweaver will resize the second image to be the same size as the first, which can cause a distorted image.

Make the buttons as small as possible. With rollover buttons, you are downloading two images, not one.

It is easy to add rollover behaviors using Dreamweaver’s Rollover Image command.

Page 5: Adding User Interactivity – Lesson 51 Adding User Interactivity Lesson 5

5 Adding User Interactivity – Lesson 5

Create a rollover button Open your Dreamweaver document and place the

insertion point where the image is to be placed. Click the Insert menu, point to Image Objects,

then click Rollover Image to open the dialog box. Assign a name to the rollover image. This name

must be unique. Click the Browse button next to the Original

Image text box and locate the first image file. Click the Browse button next to the Rollover

Image text box and locate the rollover image file.(continued)

Page 6: Adding User Interactivity – Lesson 51 Adding User Interactivity Lesson 5

6 Adding User Interactivity – Lesson 5

Create a rollover button (continued) After selecting both the original and the

rollover image, click the Preload Rollover Image check box to select it.

Add descriptive text in the Alternate Text text box (optional but recommended).

Click the Browse button next to the When Clicked, Go To URL text box. Locate the file to link to when the button is clicked.

Close all dialog boxes, save, and test your file in your Web browser.

Page 7: Adding User Interactivity – Lesson 51 Adding User Interactivity Lesson 5

7 Adding User Interactivity – Lesson 5

The Insert Rollover Image dialog box

This figure shows the Insert Rollover Image dialog box. The name entered into the Image Name box must be unique, should be lowercase without special characters or spaces, and should not begin with a number.

Click the various Browse buttons to locate the image files plus the file to be linked to when the button is clicked.

Page 8: Adding User Interactivity – Lesson 51 Adding User Interactivity Lesson 5

8 Adding User Interactivity – Lesson 5

Add rollover behaviors to existing page objects You can add behaviors to images or

objects already on your page by: Selecting the image and assigning it a name

in the Name text box of the Property inspector.

Clicking the Window menu and then clicking Behaviors to open the Behaviors panel.

Clicking the Add Behavior button (+) and then choosing Swap Image from the pop-up menu.

Clicking the Browse button and locating the rollover image file.

Closing the dialog boxes, then saving and testing your file.

Page 9: Adding User Interactivity – Lesson 51 Adding User Interactivity Lesson 5

9 Adding User Interactivity – Lesson 5

The Behaviors panel and the Swap Image dialog box

This figure on the left shows the Behaviors panel and the pop-up menu that appears when the Actions button (+) is clicked. The figure on the right shows the Swap Image dialog box. After selecting the rollover image, make sure the Preload Images and Restore images onMouseOut option boxes are checked.

Page 10: Adding User Interactivity – Lesson 51 Adding User Interactivity Lesson 5

10 Adding User Interactivity – Lesson 5

What is an event? An event is what causes an action to occur,

such as the user clicking a button or moving the pointer over an object.

Events are added to the Events pop-up menu in the Behaviors panel.

The Events pop-up menu is divided into two sections:

The top portion shows events that need an anchor placed around the object.

The bottom portion contains events that can be directly attached to an object.

The Events pop-up menu appears only after you have added an action and select the event.

Page 11: Adding User Interactivity – Lesson 51 Adding User Interactivity Lesson 5

11 Adding User Interactivity – Lesson 5

The Events pop-up menuThis figure shows the Events pop-up menu in the Behaviors panel.

If you choose an event from the bottom section of the menu, the behavior call is added to the object’s tag. If you choose an event from the top section, the behavior call is added to a hyperlink containing the selected object.

Page 12: Adding User Interactivity – Lesson 51 Adding User Interactivity Lesson 5

12 Adding User Interactivity – Lesson 5

Add multiple actions to an object Once a user event has been defined,

you can attach multiple actions to it. You can add another action by selecting

the event with the first action, then use the Behaviors panel to add another action to that event.

The Behaviors panel has arrow buttons that can be used to change the order of the actions attached to an event.

Page 13: Adding User Interactivity – Lesson 51 Adding User Interactivity Lesson 5

13 Adding User Interactivity – Lesson 5

Swap out two images on one rollover

If you have a button already defined as a rollover event and action, you can swap a second image at the same time:

Click the second image to be swapped to select it and assign a name to it.

Select the image that already has a behavior applied to it and double-click the Swap Image action in the Behaviors panel.

Select the name of the image you just assigned, click the Browse button, and locate the image to be swapped.

Close the dialog boxes and test your file. When you roll over the button, the button should change and so should the second image.

Page 14: Adding User Interactivity – Lesson 51 Adding User Interactivity Lesson 5

14 Adding User Interactivity – Lesson 5

The Swap Image dialog box with 2 swap images assignedThis figure shows the Swap Image dialog box with two swap images assigned. The asterisk following the image name indicates that an action has been assigned to that image.

Page 15: Adding User Interactivity – Lesson 51 Adding User Interactivity Lesson 5

15 Adding User Interactivity – Lesson 5

Summary

In this lesson, you learned: To use behaviors to add user interactivity to

your pages. How to create and work with rollovers. How to attach behaviors to objects. How to modify behaviors. About events and how to attach them to an

object on a page. How to add multiple behaviors to one user

action.