Assignment 5 - User Interactivity

Upon completion of this unit, you should be able to:

1. Add user interactivity to your pages by using behaviors.
2. Create and work with rollovers.
3. Attach behaviors to objects.
4. Modify behaviors.
5. Understand events.
6. Add multiple behaviors to one user action

HTML and Image Downloads

Before starting Lesson 4, download/save the following text and html files to you compass_tours folder:

1. latest.htm
   
   

Download to/Save in your Images folder the following image files:

1. about
2. about_f2
3. Ad_gear
4. Ad_gear_f2
5. Ad_tours
6. Ad_tours_f2
7. biking_button
8. biking_button_f2
9. biking_text
10. climbing_button
11. climbing_button_f2
12. climbing_text
13. compass_logo2
14. diving_button
15. diving_button_f2
16. diving_text
17. featured
18. featured_f2
19. kayaking_button
20. kayaking_button_f2
21. kayaking_text
22. latest
23. rafting_button
24. rafting_button_f2
25. rafting_text
26. Travel_logs
27. Travel_logs_f2
28. welcome_text

Defining a Behavior

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 a result of that event. Behaviors are prewritten JavaScript programs 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 Adobe Exchange for Dreamweaver Web site by clicking the Dreamweaver Exchange link on Dreamweaver's start page. If you have an Internet connection, your primary browser will open and you will be taken directly to the Web site.

Top of page

Creating Rollover Buttons

One 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:

• Create each image the same width and height. If you don't, Dreamweaver resizes the second rollover image to the size of the first image. Resizing distorts the second image.
• Make the buttons as small as possible. Remember, with rollovers you are displaying not one, but two images for the same button. The file size of the button is effectively doubled, because you have two images to download.

• Step-by-Step 5.1: Creating Rollover Buttons

  1. Start Dreamweaver and open the latest.htm file from your compass tours folder.
  2. This page contains a table with some graphics. Preview the page to make sure all the image links are sworking. Fix the links, if necessary. See links above, if you forgot to download the image files.
  3. Select (highlight) the Adventure Gear button image.
  4. Then click the Modify menu, and then click Edit Tag to open the Edit Tage dialogue box shown in Figure 5-1a.

  FIGURE 5-1a: The Edit Tag dialogue box

  
  
  

  5. Key gear in the Image Name text box. The name you enter here must be unique. No other object on this page can have the same name. Use lowercase for the name, and don't use any special characters or spaces in the name. Don't begin the name with a number.
  6. Key Adventure Gear in the Alt text box.
  7. Click Events to expand the menu in the left panel of the dialogue box.
  8. Select on onMouseOver in the expanded menu.
     
     

  FIGURE 5-1a: The pnMouseOver dialogue box

  
  
  
  Note: Notice all the options available. You are only going to enter a second image when user's roll their mouse over the Ad Gear button. You could have 10 different images for the 10 different images, if you wanted.

  9. In the empty box, key in the HTML code for the image you want to use for the Mouse Over effect:
     <img src="Ad_gear2.gif">
     
     
  10. Save and test your file in your browser.
  11. Repeat steps 3-8 for the other three button images and key in the following HTML for the swapped images:
      1. Featured Destinations
         1. Name: featured
         2. Alt text: Featured Destinations
         3. onMouseOver: <img src="featured_f2.gif">
      2. Travel Logs
         1. Name: logs
         2. Alt text: Travel Logs
         3. onMouseOver: <img src="travel_logs_f2.gif">
      3. About Us
         1. Name: about
         2. Alt text: About Us
         3. onMouseOver: <img src="about_f2.gif">
         
         
  12. To link the button to another file, highlight the Adventure Gear image, and use the PointTo File icon to drag the pointer to the gear.htm file. See links above, if you forgot to download the image files.
  13. Click inside the Link text box, move the cursor to a position in front of the gear.htm text and insert the number sign # symbol.
      
      Note: The number sign (#) in a Link text box on the Property inspector causes the browser to change the pointer to a pointing hand when the user rolls over the button.
  14. Repeat steps 12-14 to link the other three buttons to the files below:
      1. Featured Destinations: link to destinations.htm
      2. Travel Logs: link to travel_log.htm
      3. About Us: link to compass.htm
  15. Preview in browser. Check all MouseOver and Links.
      
      FIGURE 5-1b: The completed Adventure Travel page
      
      
      
  16. Save the document and remain in this screen for the next Step-by-Step

Top of page

Inserting Rollover Magic

Dreamweaver makes it easy to insert rollovers in your page. JavaScript behaviors rely on naming of objects (such as images). Using the Rollover Image command provides you with a field for naming the image, so you won't forget. If you haven't already placed your initial images on the page, you might find this method preferable because it steps you through inserting and naming the images.

• Step-by-Step 5.2: Inserting a Rollover Image

  1. Start Dreamweaver and open the latest.htm file from your compass tours folder.
  2. This page contains a table with some graphics. Switch to Layout mode to view the table structure.
  3. Place the insertion point in the blank cell to the left of Welcome to Compass. Then click the Insert menu, point to Image Objects, and then click Rollover Image to open the Insert Rollover Image dialog box shown in Figure 5-1a.

  FIGURE 5-1a: The Insert Rollover Image dialog box



Note: If you see the Getting Started in Layout mode message, click OK.

4. Key biking in the Image Name text box. The name you enter here must be unique. No other object on this page can have the same name. Use lowercase for the name, and don't use any special characters or spaces in the name. Don't begin the name with a number.
5. Click Browse next to the Original Image text box and select biking_button.gif in the Project images folder. (You're already in the Lesson05 folder of your compass tours folder.) All the images you need for this exercise are located in that folder. Then click OK (Windows) or Choose (Macintosh).
6. Click Browse next to the Rollover Image text box and select biking-button f2.gif. Click OK (Windows) or Choose (Macintosh).
7. Make sure the Preload Rollover Image option is selected.
8. Key Biking in the Alternate Text text box.
9. Click Browse next to When Clicked, Go To URL and link the biking button to biking.htm from the Lesson05 folder. Click OK (Windows) or Choose (Macintosh), and then click OK to close the Insert Rollover Image dialog box.
10. Save and test your file in your browser.
    
    Note: If you want the graphic to link to another file, you need to click Browse next to When Clicked, Go To URL and find the file to link. If you're not linking, you leave this text box blank.
11. Place the insertion point after the image and press Shift + Enter (Windows) or Shift + Return (Macintosh).
12. Use the Insert Rollover Image command, repeating steps 3-11 to add the remaining buttons: climbing-button.gif, diving-button.gif, and kayaking-button.gif. For the rollover images, use the corresponding image files: climbing-button f2.gif, diving-button f2.gif, and kayaking-button f2.gif. Don't forget to give each a unique name as well as Alternative Text. Also, you need to link these buttons to the Climbing, Diving and Kayaking. The final page should look like that shown in Figure 5-1b.
    
    Note: The number sign (#) in a Link text box on the Property inspector causes the browser to change the pointer to a pointing hand when the user rolls over the button.
    
    FIGURE 5-1b: The completed Adventure Travel page
    
    
    
13. Save the document and remain in this screen for the next Step-by-Step

Top of page

Adding Rollovers to Existing Images

Using the Insert Rollover Image command makes it very easy to insert rollovers on your page. Sometimes 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 Step-by-Step, you will add rollovers to the buttons across the top of the page.

• Step-By-Step 5.2 - Adding Rollovers to an Image

  1. Select the Adventure Gear image and key gear in the image name text box on the Property inspector (illustrated in Figure 5-2a). The image name text box is under the word Image in the upper-left corner of the Property inspector.
     
     FIGURE 5-2a:
     The image name text box in the Property inspector
     
     
  2. Click the Window menu, and then click Behaviors to open the Behaviors panel.
  3. With the image still selected, click the Add Behavior (+) button at the top of the Behaviors panel and click Swap Image from the pop-up menu, as shown in Figure 5-2b. The Swap Image dialog box appears, with the gear image selected.
     
     FIGURE 5-2b:
     The Behaviors panel with the Actions menu displayed
     
     
     
  4. In the Swap Image dialog box, click Browse and select the Ad_gear_f2.gif image from the Project_images folder. Click OK (Windows) or Choose (Macintosh). The Swap Image dialog box should look like Figure 5-2c. Click OK to close the Swap Image dialog box.
     
     FIGURE 5-2c:The Swap Image dialog box
     
     
     
  5. Save your file and preview it in your browser.
  6. Repeat steps 1-5 to add rollovers to the remaining buttons, using the corresponding image files featured_f2.gif, Travel_logs_f2.gif, and About_f2.gif. Don't forget to name each image before you add the Swap Image behavior.
  7. Save the document and remain in this screen for the next Step-by-Step.
     
     Note: In the Swap Image dialog box, Dreamweaver selects the Preload Images and Restore Images onMouseout options by default. Leave these options on. Preload Images ensures that the rollover image loads when the page loads, so users do not have to wait the first time they roll over the image. Restore Images onMouseOut returns the button to the first image when users roll off the image.
     
     
     

Understanding Events

After you select an action, Dreamweaver adds that action to the list in the Behaviors panel. Dreamweaver also adds an appropriate event 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. You can see the list of events and actions for an object (such as a graphic) by selecting the object on the page. If you want to change the event, select the event in the left column of the Behaviors panel and then pick a new one from the pop-up menu (the arrow) to the right of the event, as shown in 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. The Show Set Events button shows only those events that have been attached to the current document. The Show All Events button shows all available events.

FIGURE 5-2d:
The Events pop-up menu in the Behaviors panel

The Events pop-up menu displays events using two methods. In the top portion of the list, Dreamweaver displays events that need an anchor placed around the selected object. These events are listed with <A> preceding the event name. The bottom section shows events that can be directly attached to the selected object. Sometimes, the same event is listed in both sections. The difference is that if you choose from the bottom section, the behavior call is added to the object's tag. If you choose from the top section, the same behavior call is added to a hyperlink containing the selected object.

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 Move Event Value Up arrow or Move Event Value Down arrow on the Behaviors panel, as shown in Figure 5-3a.

FIGURE 5-3a:
The Behaviors panel with several actions assigned to one event

You can also have several images swap out with a single event. For example, you might want two images to swap out when the user rolls over one button. You might think you should create two separate Swap Image actions, but this behavior only works if you use the same Swap Image action for both images. The Swap Image Restore action restores only the last swapped image, so if you have two swap images, only the last one is restored. In the Swap Image dialog box, pick the first graphic and choose the image to swap. Then, before leaving this dialog box, pick the other image and choose its swapped image.

In the next Step-by-Step, 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.

• Step-By-Step 5.3 - Swapping Out Two Images on a Rollover

  1. In the latest.htm file, select the Welcome to Compass graphic. This is the graphic you want to change when the user rolls over each of the buttons.
  2. Name the image text.
  3. Select the round biking image to the left. This image has a Swap Image behavior assigned.
  4. Double-click the Swap Image action in the Behaviors panel. The Swap Image dialog box opens. Images that have an asterisk at the end of the name have been assigned a swap image. This is a quick way to verify which images will swap to other images.
  5. Select image "text" in the list.
  6. Click Browse and select biking_text.gif from the Project images folder. Then click OK (Windows) or Choose (Macintosh). Your dialog box should look like the Swap Image dialog box in Figure 5-8. Click OK to exit the dialog box.
     
     FIGURE 5-8:
     The Swap Image dialog box with two swap images assigned
     
     
     
  7. Repeat steps 3-6 for all the round buttons, using climbing_text.gif, diving_text.gif, and kayaking_text.gif from the Project_images folder.
  8. Save your file again and test it in your browser. When you roll over each button, the button should swap and an image should swap in the Welcome area. When you roll off the button, both the button and the Welcome text graphic should restore to their original images.
  9. Close the browser, close your file, and continue with the final Step-by-Step below.

Replacing the Home Page

Currently you have a default,htm page with nothing on it. It is an important page, however. All of your Home buttons link to it. You are now going to change your home page to the latest.htm page you just created. Dreamweaver will change all your links for you.

.

• Step-By-Step 5.3 - Swapping Out Two Images on a Rollover

  1. In the Files winow, locate the latest.htm file and rename it default.htm.
     1. Highlight the latest.htm file
     2. Select File and click Rename
     3. Type in default.htm and hit Enter
     4. Click OK in the dialogue box in order to overwrite the existing file.
     5. Click Update in the Update File dialogue box
        
        
        
        
     6. Dreamweaver opens each file in the list, makes the change, and then closes the file. If a file in the list is currently open, Dreamweaver makes the change but does not save or close the file. The site map and site files list now show the new name. Remain in this screen for the next Step-by-Step.
        
        
  2. Follow the steps above to rename index.htm as default.htm
     
     Note: The home page must be named either index.htm or defaul.htm. If you left both a default and index page, the broawser would open index.htm as the home page.
     
     
  3. Save your work. Preview in browser and check all the links.