Chapter 16. Getting Interactive with Behaviors

CONTENTS

 

•  Behaviors and JavaScript
•  Working with Behaviors in Dreamweaver
•  Behaviors and Dynamic Data
•  Some Useful Behaviors
•  Working Sneakily with Behaviors
•  Summary

Behaviors are user-friendly pieces of JavaScript prebuilt by Dreamweaver that enable you to create advanced interactions within a page without actually having to script them yourself. With the many popular Dreamweaver behaviors, you can create dynamic, advanced interactive page elements such as rollover images and pop-up menus that greatly enhance your site. You can even create redirection scripts that will load alternate pages depending on the user's browser.

Topics covered in this chapter include an introduction to JavaScript fundamentals, how Dreamweaver writes JavaScript, and how to attach and work with behaviors in Dreamweaver.

Behaviors and JavaScript

Don't worry you don't have to know how to write JavaScript to use Dreamweaver behaviors. But you'll be better able to understand, and even tweak, the code Dreamweaver writes if you're familiar with a few of the basic concepts of the language.

JavaScript and HTML

HTML was originally designed for scientists and researchers to put their documents in an electronic format that could be shared and viewed over a wide range of computers. Therefore, it is primarily designed to display static text with a simple, basic structure. The current state of the web has stretched HTML way beyond the purpose for which it was designed. The rising needs of early web developers created a demand to extend the basic functionality and interactivity of the web. JavaScript was developed and incorporated into HTML to satiate this demand.

JavaScript is a scripting language loosely based on the Java programming language. A scripting language, by definition, is not self-executable. This means that it is a set of instructions that are read and executed by another program, in this case the browser. This is in contrast to Java, which is a compiled language. This means that the program is compiled or packaged into a self-contained program that can be run by itself.

Because it is a scripting language, you do not need a special program with which to write the script. Scripting languages can and are written as text files. The browser reads the script and executes the functions it finds there.

Working with Events and Actions

A Dreamweaver behavior, like most JavaScript interactions, consists of an event and an action. When the user clicks on something, that's an event. That event (clicking) triggers an action such as a new window opening, a sound playing, or a picture changing.

What Are Events?

The browser is on the alert constantly watching for events. When the browser detects an event, it looks to see if there's an event handler that contains a series of instructions for handling that event. Those instructions are the action (a window popping open, a sound playing, and so forth.)

What Are Actions?

An action is made up of one or more scripting statements that are do statements, imperatives that command do this, do that, then do the other thing! When an action might get performed more than once on a page, it's more efficient to combine all of those imperative statements into a single unit called a function. A function is a recipe for action. When there are functions are involved, the event handler doesn't have to say "do this, do that, do the other thing." The event handler can simply so, "go find this function and perform the actions it specifies."

How Dreamweaver Writes Behaviors

When Dreamweaver writes a behavior, the action part of the behavior is put into what is called a function. The event part of the behavior is added to your page as an event handler containing a function call (which contains all the instructions that will be executed when the event happens) that calls up that function. We say the event handler (the event part) calls that function (the action part). Calling the function makes the function execute and (voila!) the action happens.

For example, if someone tells you to run around the yard three times and do a cartwheel, it's comparable to a set of statements that will happen the moment the browser sees them. Just like you instantly running around, the browser performes the commands as soon as it loads the page reads this instruction.

But if someone tells you to run around the yard three times and do a cartwheel, but not until he calls your name and says go, that's a function. When he actually calls your name and says Go!, that's the function call. What do you do in response to the function call? You run around the yard three times and do a cartwheel, which is the action. When the function is called (by the function call), the browser it performs its action.

So, in terms of the code, imagine you have a simple text link in your document (like the one shown in Figure 16.1), and you add a simple behavior like the Popup Message behavior to it. Dreamweaver adds the following code to the <body> of your document (new code shown in bold):

Figure 16.1. A very simple text link ready to receive a Dreamweaver behavior.

<a href="javascript:;" onClick="MM_popupMsg('Hello, world!')">Click here!  </a>

The <a> tag contains a link ("javascript:;") and an event handler (onClick=) that contains the function call (MM_popupMsg('Hello, world!')).

The actual function that is run is in the <script> tag in the head of the page. It looks like this:

<script language="JavaScript" type="text/JavaScript">  <!-- function MM_popupMsg(msg) { //v1.0    alert(msg);  }  //-->  </script>

Note

The linkto javascript:; is a null link, a link that doesn't send the browser anywhere. It's comparable to the # null link but safer to use because linking to # can cause the browser to scroll back to the top of the current document.

Other examples of actions are:

• Checking to see what browser is being used

• Changing any element (image, text) on a page

• Going to a different page

Actions are always things only the computer does (noninteractive).

Other examples of events include:

• Clicking

• Moving the mouse over something

• Loading

• Unloading

• Saving

Events are things the computer and the user do together (interactive).

Working with Behaviors in Dreamweaver

Behaviors can add functionality to your page that goes well beyond basic HTML. Some of these behaviors are popular and used quite often. Others are little things that will give your site a professional touch. Understanding events and how they influence the usability of your page is key to making your page work the way you want and the way the user expects.

In this section, we discuss how to add behaviors to page elements and how the elements that are chosen affect the behavior options.

Using the Behaviors Panel

The Behaviors panel is the one place where the behaviors can be added, subtracted, and manipulated (see Figure 16.2). To open the Behaviors panel, go to Window > Behaviors or press Shift+F3 (Windows) or Cmd+F3 (Mac).

Figure 16.2. The Behaviors panel.

The plus (+) button is used to attach behaviors from a list of available behaviors for the selected element. You can attach more than one behavior to an element. The up and down arrow buttons control the order in which the behaviors are stacked. Alphabetically, events determine the order of behaviors. The up/down only changes the order of behaviors if more than one behavior uses a single event.

Attaching Behaviors to Page Elements

To attach a behavior to a page element:

1. Select the page element.

2. With the element selected, open the Behaviors panel.

3. Click the (+) button and select a behavior. Note that the element to which you are attaching the behavior will determine what behaviors are available. Also, page content will determine some of the options. The Timeline behaviors will only be active when there is a timeline animation on the page.

4. Complete the chosen behavior's dialog box and click OK. The behavior is now attached to the page element. Notice that the behavior is listed in the panel when that element is selected.

5. Highlight the behavior in the panel, and choose the event drop-down arrow to select an appropriate event for the behavior.

As mentioned previously, you need to remember two very important points when using behaviors:

• The event options depend on the browser setting. There are events for the following:

  • 3.0 and later

  • 4.0 and later

  • IE 3 to 6 (individual browser versions)

  • Netscape 3 to 6 (individual browser versions)

  The number of events available goes up as the browser version goes up. It is advisable that you choose 4.0 and above unless you know you have a targeted audience and you need the advanced functionality of a more specific setting. Click the plus (+) button and go to Show Events For (see Figure 16.3).

  Figure 16.3. The Show Events For options.

  

• The behaviors and events available also depend on the element to which you are attaching the behavior. The list of behaviors available will differ significantly if you are attaching the behavior to the body of the page, an image, or a hyperlink around an image or text.

Here's a common example of how these two ideas work. You type some text in the Document window. Then looking to attach a behavior to it, you open the Behaviors panel and click the plus (+) button. You select the Popup Message behavior, type in your message, and click OK. Now back in the Behaviors panel, you see your new behavior. The event is set to onLoad. You don't want that one, so you click the arrow to select your events. There are only two: onLoad and onUnload. That doesn't seem right. You want onClick. Then you realize that it must be the browser setting. Ah! It was set to 3.0 and later. You change it to 4.0 and later and all will be well. You click the arrow to select the onClick event. However, now there are only four more and none is the one you want. You realize that they are all noninteractive events. onLoad, onFocus something else must be wrong.

Because you are in Code and Design view, you check the code. Ah! You notice that the call to the MM_popupMsg function is set to onLoad and written to the <body> tag! You didn't apply it to a link! So you delete the behavior again, make the text into a null link, attach the behavior to the link, go to Events, and there it is: nine interactive events. You select onClick and all is well. For fun, you change the Show Events For setting to IE 5, and you now have more than 30 events from which to choose.

So keep an eye on your browser settings and the elements to which you are attaching behaviors.

Exercise 16.1 Setting the Browser Events Level

In this exercise, you learn how the browser setting influences your choices for events.

1. Open a new document (File > New > HTML) and type behavior test in the Design window.

2. Select the word Behavior and in the Property inspector type in javascript:;. That text is now a link.

3. Open the Behaviors panel.

4. Select the word Test.

5. Click the plus (+) button and select Popup Message.

6. In the dialog that opens, type in a message and click OK to close the dialog box.

7. In the Behaviors panel, click the down arrow in the Events field and notice your selections.

8. Click the plus (+) button again and go to Show Events For. If it is set for 3.0 and later, set it to 4.0 and later. If set for 4.0, set to 3.0. Notice the change in available events.

9. Highlight the linked text and apply this behavior to it. Notice the difference in event options.

10. Change the Show Events For to IE 5.0 and notice all the events that are now available.

11. Set to onClick and then Preview in Browser (F12). Click the link to activate the pop-up message.

Note

Some behaviors are content-dependent. The Drag Layer behavior will be active only if there is a layer on the page. Control Flash or Shockwave will be active only if you have a Flash or Shockwave movie on the page. The Validate Form behavior will work only if there is a form on the page.

Applying Behaviors to the <body> Tag

In some instances, you will want to attach the behavior to the body. Some behaviors are designed specifically for the <body> tag.

The following behaviors are usually attached to the <body> tag:

• Check Browser

• Check Plugin

• Preload Images

The following behaviors can be attached to the <body> tag:

• Call JavaScript

• Change Property

• Go To URL

• Open Browser Window

• Play Sound

• Popup Message

• Set Text of Status Bar

For instance, if you want a small window to pop up when people come to your site, you can set the Open Browser Window behavior to activate when the page loads (onLoad event). This way, the browser window will open without any user interaction.

To attach a behavior to the body, you must make sure that the body tag has focus or is selected. You can do this in two ways:

• Go to the tag selector at the bottom-left corner of the page and click on the body tag.

• Click on an empty part of the page, making sure that no other page element is selected. You can then add a behavior, and it will be written to the body tag.

Applying Behaviors to Images

Behaviors can be added to images. Unlike adding behaviors to plain text, which will instead look to a containing element to hold the behavior (the <a> tag usually), available behaviors can be added directly to an image. At this stage, it is important to realize that there is a difference between an image and an image that is a hyperlink. You can certainly add behaviors to images, but it might be better to make the image into a link. One benefit of attaching behaviors to links is that the cursor changes to a hand over links. This gives users a visual indication that something will happen if they click. If you add a behavior to a plain, non-linked image, the behavior will still work but the user won't know that it is a clickable item. You might also run into browser concerns as not all browsers know how to handle event handlers attached to regular images. There is better browser support for behaviors within links.

Some behavior-event combinations will add a link tag when applied. This is because the link tag is required for that particular event. You can determine these events because they are within parentheses. For example, if you attach a Popup Message behavior to a regular image, by default the (onClick) event is chosen. A check of the code will show that an <a> tag has been added and the behavior is attached to the <a> rather than the image tag, which was the element selected when you added the behavior. The following exercise will demonstrate the difference between these ideas.

Exercise 16.2 Attaching a Behavior to an Image

In this exercise, we will attach a behavior to an image. Specifically, we will attach a Popup Menu behavior to an image.

Before you start, copy the chapter_16 folder on the CD to your hard drive. Define a site called Chapter 16, with this folder as the local root folder.

1. Open pop_up.htm from the chapter_16 folder on the CD.

2. Click the image to highlight it and go to the Behaviors panel (Windows > Behaviors).

3. Click the plus (+) button and select Popup Message.

4. In the dialog box, type in Window in Venice and click OK.

5. In the Events field of the Behaviors panel, click the down arrow and choose onClick.

   If this is not available, click the plus (+) button and under Show Events For, choose 4.0 and later. onClick should now be available.

6. Preview in Browser (F12) and click in the image. The pop-up message should appear.

Keep this Dreamweaver window open because you will go back to it in the next section.

Now what's wrong with this picture? The behavior works fine, but your users will have no visual indication that clicking this image will actually do anything! They need some visual clue that this is an interactive element (perhaps the cursor changing as if it were a link, for instance).

You might have noticed that there are many events available for your behaviors. Some of them seem redundant, such as onClick and (onClick). These are quite different in the code that is generated and how the browser reacts to it.

Those events without parentheses will be added directly to the selected element. While this might work fine in some browsers, there will be no visual indication that the item is clickable, as it is not a link.

Events within parentheses will wrap the selected element within an <a> tag. This will do two things:

• Change the cursor into a hand so that users know that it is clickable.

• There is better support for behaviors added to the <a> tag.

We will now change the file we just created so that it is wrapped within the <a> tag.

1. Back in the page you just built, click the image and remove the behavior.

2. Click in the image to highlight it.

3. Go to the Behaviors panel and apply the Popup Message behavior.

4. For an event, choose (onClick) (the one within parentheses).

5. Preview in Browser (F12). Notice that now, when you mouse over the image, the cursor changes to a hand, indicating that the image is clickable. Go to the code and notice that Dreamweaver has automatically added an <A> tag to the image.

This defines, again, the difference and importance of knowing where in the code the behavior is attached and how this affects the functionality of your page.

Just for fun, go back to the behavior and change the Show Events For to IE 5 and look at the sheer number of events available to you.

Behaviors and Dynamic Data

 

Behaviors use client-side scripting; live data pages use server-side scripting. But you can use dynamic data sources in your behaviors. The application server will use the server-side scripting to construct the JavaScript code that goes into the behavior; the browser will then execute the behavior.

How you integrate dynamic sources into your behaviors is up to your own imagination. Any behavior that causes a file to open will let you choose a data source for the file's URL. This includes Open Browser Window, Go To URL, Show/Hide Popup Menu, and even Jump Menus. Behaviors that show images, such as Swap Image, will let you supply a dynamic src for the image chosen. Behaviors that show text messages, such as Popup Message, Set Text of Layer, and Set Text of Status Bar, can be configured to show dynamic text elements instead of static text. The following section shows how you can be sneaky, if needed, to get your dynamic behavior assembled.

Popup Message Behavior

You cannot assign a dynamic text source to this behavior as you're creating it, but you can be sneaky and add dynamic text after the fact. Do this:

1. Apply the Popup Message behavior as normal, entering some brief temporary text to be displayed in the message.

2. Go to Code view or Code and Design view, and find the code for the behavior's function call.

3. Select and delete the temporary text you entered when you created the behavior.

4. From the Bindings panel, choose a Recordset field, and drag it into the Code window, exactly where you deleted the temporary text (see Figure 16.4).

   Figure 16.4. Sneaking a dynamic text element into the function call for the Popup Message behavior.

   

Jump Menu

A dynamic jump menu is simply a cross between a standard jump menu and a dynamic list/menu form item. Create it like this:

1. Create a jump menu as you normally would (Insert > Form Objects > Jump Menu), but in the dialog box that appears, assign it no entries.

2. In the Server Behaviors panel, click the plus (+) and choose Dynamic Elements > List/Menu. When the dialog box appears, choose your jump menu as the list/menu to affect.

3. Assign each menu entry a name and value from your recordset. Remember that the value must come from a field that creates a valid URL.

Some Useful Behaviors

This section discusses some of the popular behaviors that come with Dreamweaver. Keep in mind that some of the element-specific behaviors are covered in other chapters. For instance, the behavior that deals with Form Validation is covered in Chapter 11, "Working with Forms."

Some behaviors, such as the Popup Message and the Open Browser Window, have already been discussed in examples throughout the book.

Pop-Up Menu

Dreamweaver can now create its own pop-up menus. This functionality was originally available in Macromedia Fireworks 4. Because it was the first implementation of this feature, it had some limitations, such as menu placement. Dreamweaver MX solves this issue, and an improved interface has been added.

To use this behavior, you need to attach it to an image or a hyperlink. Insert an image on your page. Select the image and then open your Behaviors panel. Select Show Pop Up Menu. Then follow these steps:

1. On the opening screen, enter the name of the menu item. This is the text that will appear on the button. Then assign the text a link by browsing to another page or entering in an absolute URL. You can set the target here if you are using Frames.

2. Click the plus (+) button to add this menu item. Click the Indent Item button if you want to create a submenu off the next higher menu item. Items will continue to be indented until you click the Outdent Item button. Use the up and down arrow buttons to arrange the order in which the menu items will appear.

3. When you have completed adding your menu items, go to the Appearance tab. Here you will determine the look of your menus.

4. Select whether this will be a vertical or horizontal menu. The Preview area will give you an approximate look of the menu. Choose the font name, size, and style of the menu text. Choose a justification setting. Choose the text and cell colors for the Up and Over states.

5. When set there, go to the Advanced tab. Here you can specify specific settings of your menu. As there are really tables, you can set cell width and height, padding and spacing, and delay time. You can also specify borders and specific colors of the borders. (These settings might be browser-dependent.)

   6. Now go to the Position tab. This tab lets you specify the position of the pop-up menus relative to the image to which they are attached. If you wish, you can specify any pixel number for the X and Y values.

6. Click OK and your pop-up menu will be built. It will not show up in the Design window, so Preview in Browser to see it in action!

Exercise 16.3 Building a Pop-Up Menu

In this exercise, we will create a pop-up menu using Dreamweaver's built in behavior. This is a very popular way to quickly build an advanced navigation system.

If you haven't done so yet, copy the chapter_16 folder on the CD to your hard drive. Define a site called Chapter 16, with this folder as the local root folder.

1. Open a new HTML document and save it as pop_up.htm.

2. Insert the navigation.gif image (from the chapter_16 folder on the CD) onto the page. Make sure that it is selected on the page.

3. In the Behaviors panel, click the plus (+) button and select Show Pop Up Menu. The wizard shown in Figure 16.5 will display.

   Figure 16.5. The Show Pop-Up Menu dialog box.

   

4. In the contents panel, type in Macromedia in the Text field. In the Link field, type in http://www.macromedia.com.

5. Click the plus (+) button. Type in Dreamweaver. In the Link Field, type in http://www.macromedia.com.

6. Click the plus (+) button again and type in Page 3. In the Link field, click the Browse folder and browse to swap_image.htm in the chapter_16 folder.

7. Click on the Indent Item button. This will indent Page 3 relative to "Dreamweaver". This will create another level of pop-up menu.

8. Click on the Appearance tab. This panel is where you determine the look of the menu.

9. You can choose between Vertical Menu and Horizontal Menu. Look at both options but choose Vertical Menu. Leave the rest of the default options.

10. Go to the Advanced tab. Leave the defaults here, but notice that these options are equivalent to table settings. Dreamweaver is actually creating tables to make these menus.

11. Go to the Position tab. This menu allows you to set the position of the menu relative to the image to which this behavior is attached. This is a nice improvement from the Fireworks 4 implementation of this feature!

12. Click on the leftmost button. This will make the menu appear from the lower-right corner of the image.

    The Hide Menu on onMouseOut Event option should be checked. This will make the menu disappear when you move off it, and will add a Hide Pop Up Menu behavior to your Behaviors list. This behavior is only used in conjunction with a pop-up menu and should only be added with this check box.

13. Click OK to create the menu. It will not be functional in the Design window.

14. Press F12 to Preview in Browser and test your menu!

Open Browser Window

You can use this behavior to open a new window of the browser. This differs from setting the target to _blank (see Chapter 12, "Designing Frame-Based Pages") because with this behavior, you can define the size of the window, you can give a name to the window, and you can dictate the appearance of the window, such as what menu bars it gets, whether it gets a status bar, and so on. Setting the target does not produce this kind of control.

To use the Open Browser Window behavior, do this:

1. Create two files: One will be the main page that contains the behavior that opens the new window; the other document will appear in the new window.

2. With the main page open, select whatever page element you want to trigger the behavior.

3. In the Behaviors panel, click + and choose Open Browser Window.

4. In the dialog box that appears, enter the specifics for the new window. This includes the URL of the second page you constructed in Step 1, and various options for the window.

5. Name your new browser window.

To test, Preview in Browser and click in the link.

Exercise 16.4 Using the Open Browser Window Behavior

The Open Browser Window behavior (see Figure 16.6) is used quite a bit in web design. It can be used for special messages that need to get attention. It can be used if you have a large page that shouldn't have to be reloaded every time the user goes away from it. For example, if you have a page with lots of image thumbnails, you can use this behavior to open a new window with the full-size image. Then the user would not have to reload the thumbnail page when they want to see a different photo.

Figure 16.6. Open Browser Window options.

In this exercise, we will use the Open Browser Window behavior. With this behavior, you can set the size of the window and control what options it gets, such as scrollbars and a status bar.

If you haven't done so yet, copy the chapter_16 folder on the CD to your hard drive. Define a site called Chapter 16, with this folder as the local root folder.

1. Open a new document and save it in the chapter_16 folder. Type My Link, and type javascript:; in the Link field of the Property inspector.

2. Highlight this link text and then click the + sign button in the Behaviors panel and select Open Browser Window. The Open Browser Window dialog box is shown in Figure 16.6.

3. Enter these settings:

   • URL to Display: Click the Browse button and select the browser_window.htm file from the local root folder or any other page you want.

   • Window Width: 300

   • Window Height: 200

   • Attributes:

     • Select Scrollbars as Needed

     • Status Bar

     • Resize Handles

   • Window Name: New

4. Click OK to finish the behavior.

5. Preview in Browser and click the link. The new window should open with the attributes you assigned.

There are limitations to this behavior. You cannot define where on the screen it will open. You cannot tell it to open behind the main window. You can set these and other properties by customizing the JavaScript, but this must be done manually in the code. As mentioned earlier, that requires a rather strong understanding of JavaScript. Note that there is a "Close Window" function in the included Snippets panel in Dreamweaver MX. This can be added to the page that is being opened in the new window.

Extensions that offer other options are available for opening a browser window. Check out the table at the end of this chapter for examples. Extensions are discussed in Chapter 35, "Working with Extensions."

Setting the Text of the Status Bar

This behavior sets the text in the status bar at the bottom of the browser window. This behavior gives your page that little touch that would appear to be difficult but is made easy with Dreamweaver MX.

To use this behavior, open a page and click the plus (+) button on the Behaviors panel. Choose Set Text > Set Text of Status Bar. In the dialog box that opens, type in some text. Click OK.

Since we didn't select anything, it will be added to the body tag with an onLoad event. This means that it will show as soon as the page loads. Preview the page, and the text you typed should show up in the status bar. Keep in mind that the status bar is an option in most browsers, so do not put critical information in this behavior. It's more of a nice detail.

Exercise 16.5 Using the Set Text of Status Bar Behavior

This behavior adds a little professional touch to your web page.

1. In an open document, type Status Bar.

2. Select this text and make a null link. (Type javascript:; in the Link field.)

3. Go to the Behaviors panel, and click the plus (+) button. Go to Set Text > Set Text for Status Bar.

4. In the dialog box, type in This behavior is easy!! and click OK.

5. In the Behaviors panel, make sure the event is set for onMouseOver. If this option is not available, check your Show Events For setting and make sure it is set for 4.0 and later.

6. Preview in Browser. Roll the cursor over the link and notice that in the lower left of the browser, your text now appears. After you mouse over that link, the text is there to stay until you leave the page or the user activates another instance of this behavior.

7. Let's smooth out the functionality of this behavior. Back in the Dreamweaver window, highlight the text link. The applied behavior will show in the Behaviors panel.

8. Click the plus (+) button and select the Set Text of Status Bar again. This time, leave the field blank and click OK.

9. Back in the panel, change the event to onMouseOut.

10. Preview in IE.

Notice that now when you move the mouse off the link, the text disappears. Although this is a cleaner design, you should certainly use this functionality however you need.

Performing a Browser Check

You can set up your site to show different content depending on the browser the user is using. Although this might increase the number of pages in your site, you can be assured that they will be viewed as you designed them without browser-incompatibility concerns.

This might be required only if you have a lot of DHTML, with animated layers and other elements that might be prone to cross-browser issues. This behavior uses JavaScript to determine the browse name and version and then automatically links to the determined path.

To use this behavior, you are deciding a few things. The behavior decides among IE, Netscape, and others. For testing this behavior, you will need at least three browsers installed. Also, you will need to make pages that let you know that it is working. For instance, you will need to make a page that says This is Netscape or This is IE and this is the other page.

There are also a couple ways to set this up. Since the behavior is going to happen as the page is loading, you can set up an empty page that contains only the behavior. It will then direct you to the correct page. Or, for those browsers that don't support JavaScript or for those that have disabled it, put the behavior on the initial page. This page should have content for those users. Others will be directed accordingly.

You have three choices for redirection:

• Stay On This Page

• URL

• Alt URL

Using these combinations, you can set up your redirection. You also have browser versions to consider. By default, they are set to 4.0. So the behavior is asking, "What browser is it?" but also "What version?". So those with version 3 browsers can be sent somewhere else.

For this example, we will set up the behavior so that the other browser will stay on the same page, and IE and Netscape users will be redirected. Again, you will need at least three different browsers installed to really see this. For this requirement, you can have a combination like Netscape 3 and 6, and IE 4 or above.

1. With the initial or JavaScript-free page open, click on the plus (+) button of the Behaviors panel. Choose Check Browser.

2. For URL, browse to the page you have created for Netscape 4 and above users. For Alt URL, choose the page you created for IE 4 and over users. All others are going to stay on this page.

   For Netscape 4.0 or later, choose Go to URL. For Otherwise, choose Stay on This Page.

   For Internet Explorer 4.0 and later, choose Go To Alt URL and for Otherwise, choose Stay on This Page.

   For Other browsers, choose Stay on This Page.

3. Save and Preview in the various browsers to confirm that everything is working as planned.

4. The accompanying CD contains an example page set up to detect the browser version and then redirect accordingly. Go to the chapter_16/samples folder and open browser_check.htm directly in the browser. It should show text according to the browser type.

Open this file in Dreamweaver and notice how the behavior is set up. Also notice that it is in the <body> tag. This means it will be executed when the page loads. The redirect to the alternate pages will take a fraction of a second. Or as discussed earlier, apply the behavior to the initial page that has content for non-JavaScript enabled browsers and then set the "stay on this page" options for those that do not get redirected.

You can use the browser version number to further refine the behavior. You can have extended functionality in pages designed for IE 5.0 and higher. If someone comes in with IE 4.0, you can send her to less-complicated pages. This might be useful if you are using other behaviors that use 5.0 events. You can redesign these behaviors to work with 4.0 events for these viewers.

Keep in mind that this behavior is not foolproof. As with every stage of development, make sure to test all your functionality as you go.

Swapping Images

One of the more popular behaviors used on many sites is the capability to change or swap images depending on user interaction. Dreamweaver has a built-in way to make a rollover image, as it's often called. This is when one image is swapped with another image when you roll over it. You can use behaviors to extend this functionality, creating advanced rollovers.

Basic rollovers can be created quickly in Dreamweaver, using the Image Rollover object (see Chapter 6, "Links and Navigation," for more on this.) In this section, you will learn how to make more complex rollovers.

Actually, two behaviors are used when making a rollover image:

• Swap Image

• Swap Image Restore

These are two separate behaviors that enable you to control exactly when you want things to appear and change. This is the same idea as in the status bar text example: one behavior to show it, and another to make it disappear. By default, when you add the Swap Image behavior, the Restore Images onMouseOut option is checked, and this option writes the Swap Image Restore behavior.

To make a simple rollover, click Insert > Interactive Images > Rollover Image. You will be presented with the Insert Rollover Image dialog box (see Figure 16.7).

Figure 16.7. The Insert Rollover Image dialog box.

For Original Image, browse to the image that you want to initially show.

For Rollover Image, browse to the image you want to show on the event. You can give the image Alternate text if you wish. This is for those who cannot view images. It also shows up when you pause your mouse over the image.

If you want this rollover image to be a link, go to When Clicked, Go to URL field and browse to the desired file. Click OK.

A rollover image is really a Swap Image behavior with a Swap Image Restore behavior. If you click on the image, you can see these in the Behaviors panel. By default, the event is set to onMouseOver.

Preview in Browser to see this in action. Simply roll your mouse over the image and it will swap.

Disjointed Image Swaps

These behaviors can be combined in many ways, and more than one behavior can be added to any image for more complex interaction.

Using combinations of these behaviors, you can have an image on one side of the page swap an image on the other side of the page. This is called a disjointed rollover.

Multiple-Image Swaps

An image can be set to swap itself and other images on the page with one event. This is called a multiple-image swap. Exercise 16.6 demonstrates a multiple-image swap.

To make a multiple-image swap:

1. Insert two images onto the page. Save it. For this behavior, it is important to name them. For each image, type in a name in the top-left field of the Property inspector.

2. Click on the first image and then go to the Behaviors panel. Click the plus (+) button and choose Swap Image. In the Swap Image dialog box (see Figure 16.8), your two named images should be listed.

   Figure 16.8. The Swap Image dialog box.

   

3. Make sure the first image is selected, and in the Set Source To: field, browse to the image you want to be the rollover image. Leave the two boxes checked at the bottom. Now, click the second image. In the Set Source To: field, browse to the image that you want the second image to swap with.

4. Click OK to close the dialog box. The critical idea for this is that we just set two different images to swap when you roll over the first image, because we applied the behavior to that first image.

5. Preview in Browser. Roll over the first image. Both images should swap. Now roll over the second image. Nothing happens because there is no behavior applied to that image. The behavior is applied to the first image but controls the second. That is the essence of a multiple-image swap (also called a disjointed rollover).

Exercise 16.6 Creating a Rollover Image

In this exercise, you first make a rollover image the easy way and see how it was created. Then you add complexity to it.

If you haven't done so yet, copy the chapter_16 folder on the CD to your hard drive. Define a site called Chapter 16, with this folder as the local root folder.

1. In a new document, go to Insert > Interactive Images > Rollover Image. The Insert Rollover Image dialog box will display (refer to Figure 16.7).

2. In Image Name, give it a name that describes the content. Here, call it Pisa.

3. For Original Image, browse to the chapter_16/samples/images folder on the accompanying CD. Choose pisa1.jpg.

4. For Rollover Image, choose pisa2.jpg.

5. Leave Preload Rollover Image checked. Leave the Go to URL field empty. You can use it to navigate to another page, but for the example purposes here, you can leave it empty.

6. Click OK to close the dialog box.

7. Preview in Browser and roll your mouse over the image. It should immediately swap to the second image. Mouse off of it and it will revert to the first image.

   Now go back to Dreamweaver and see what it built for you.

8. Open the Behaviors panel. In the Design view, click the image.

   Notice that the list contains two behaviors. Click in an empty part of the Design window or click the body tag in the tag selector. Notice that the Preload Images behavior is listed. You added this via the check box in the initial dialog box. If you didn't have this behavior, the image would not be downloaded until you moused over the image. This would introduce a lag time into the swap. This behavior brings down the image as the rest of the page loads, and it is then ready for the swap.

9. Click again on the image. Double-click the Swap Image behavior in the panel. It will open the dialog box shown in Figure 16.8.

   Note

   

   The Swap Image Restore behavior can be used only in conjunction with the Swap Image behavior. There are no settings for it other than setting the event, which is onMouseOut by default.

10. Now add complexity to this image behavior. Put the cursor on the page and then select Insert > Image and choose gcanal1.jpg. This image is found in chapter_16/samples/images on the CD.

    In the Name field next to the thumbnail in the Property inspector, type in canal.

    It is important to name the images because Dreamweaver uses this to keep track of the behaviors. Also, only named elements can be changed with JavaScript.

    Now you are going to use the Pisa image to change the canal image. This means that when you roll over the Pisa image, you expect the canal image to change.

11. Click the Pisa image. Double-click the existing Swap Image behavior. You can use this one instance of the behavior to control many images at once.

12. Choose the canal image. For Set Source To, click the Browse button and choose gcanal2.jpg from the chapter_16/samples/images folder.

    Now both images in the list should have a source file.

13. Click OK to close the dialog box, and then Preview in Browser.

    Roll over the Pisa image and both images should change. Mouse out and they both switch back.

    Roll over the canal image and nothing happens. There is no behavior attached to it.

14. Now give this one more level of complexity. In Dreamweaver, click the canal image. In the Behaviors panel, click the plus (+) button and add a Swap Image behavior.

15. In the dialog box, select canal in the list and for source select gcanal2.jpg. Click OK to set the behavior.

    Now you expect that rolling over the canal image will cause a swap to occur.

    To view the final result, open swap_image.htm in the chapter_16 folder.

16. Preview in Browser.

Rolling over the Pisa image will still cause both images to swap. Rolling over the canal image will cause only the canal image to swap.

Working Sneakily with Behaviors

Borrowing function calls and moving functions to shared files are two really cool and sneaky techniques to learn with behaviors.

"Borrowing" Function Calls

After you understand how functions and function calls work in Dreamweaver behaviors, you can extend your use of behaviors by "borrowing" their function calls to put in unusual places, essentially allowing you to attach behaviors to elements not normally allowed by the Dreamweaver interface. For instance, you can call behaviors from within media elements, like Flash or QuickTime movies. You can even call behaviors from within other behaviors.

It works like this:

1. Start by creating a temporary text link (something you'll delete when you're done). Somewhere in the document, type a word or two of text, and link it to # (a null link).

2. With the new text link selected, open the Behaviors panel and apply the behavior whose function call you want to borrow. (Maybe you want to call the Popup Message behavior from within a Flash Button, for instance. You would start by applying that behavior to your temporary text link.) Configure the behavior as desired. Test it out in a browser to make sure it does what you need it to do.

   3. In Code view, find the code for your text link (see Figure 16.9). It will include the function call from the behavior, like this (function call is shown in bold):

   <a href="#" onMouseOver="MM_popupMsg('Hello, world!')">click me</a>

   Figure 16.9. Creating a function call by applying a behavior to a temporary text link.

   

   Select and copy the function call code all the code between the double quotes, starting after onMouseOver= (just like the bold code shown here). Don't include the quotes themselves, though!

3. You are now free to attach this function call to any other behavior or page element. To add the function call to Flash Button or Text, for instance, double-click the Flash object to open its editing window. In the Link field, type the word javascript followed by a colon, then paste your function call (see Figure 16.10). For the Popup Message behavior, the call should be javascript: MM_popupMsg('Hello, world!').

   Figure 16.10. Adding the borrowed function call to a Flash object.

   

4. Delete the temporary text link. Be careful here, however! If you just select the link in Design view and delete, Dreamweaver will remove the function as well as the function call. So instead, go to Code view and delete the item from there. (After you've deleted the link, look through the document <head> to make sure the main function is still present.)

Note

See Chapter 17, "Controlling Layers with JavaScript," for examples of using this technique to call behaviors from other behaviors. See Chapter 19, "Plugins, ActiveX, and Java," and Chapter 20, "Building Web Pages with Flash," for examples of using the technique with media elements.

Moving Functions to Shared Files

Experienced scripters know that any code that will be used repeatedly should be accessed from a single, shared resource for greatest efficiency. This makes the code easier to read and edit, and also especially if the code is extensive trims download time and browser overhead. When dealing with JavaScript in HTML documents, this often means moving the functions to a linked JS file that can be shared between HTML documents.

Any time you use a Dreamweaver behavior repeatedly across a site, you have an opportunity to streamline your code by moving the function code to a shared file. Dreamweaver will even help you. You must cut and paste the function code to a new JS file, and create a link between the two documents. You can then easily share that JS file between documents, and Dreamweaver will recognize its presence.

To move one or more function calls to a shared JS file:

1. Open an HTML file that contains one or more applied behaviors that you know you'll be re-using in other documents.

2. In Code view, scroll to the <head> section of the document and find the <script> tag containing your behaviors' functions.

3. Select everything between the opening and closing <script> tags (but not the tags themselves), and select Edit > Cut. (See Figure 16.11.)

   Figure 16.11. Removing a behavior's function from the document <head>.

   

4. Go to File > New to access the new document dialog box. Here, choose the Basic category of files, and choose to create a new JavaScript file.

5. When the new file opens, place the insertion point in a new paragraph after the opening comments and Edit > Paste. (See Figure 16.12.)

   Figure 16.12. Adding the behavior function to a new shared JS file.

   

6. Save the file, with the .js extension, into your site. (After you've created this shared file, you can simply add other behavior functions to it later; you don't have to create a new JS file every time. Each site you work on can have its own shared JS file.)

7. Close the JS file, and return to your HTML document.

Your behaviors are now broken, until you link your HTML document with the new shared JS file. To link the shared file, do this:

1. Go to View > Head Content, so the Document window shows the little gray strip of icons that represent your document head.

2. Find and select the script icon. (This should select the now-empty <script> tag from which you removed the functions.)

3. In the Property inspector, find the Src field. Click its Browse button, and browse to the shared JS file. (See Figure 16.13).

   Figure 16.13. Changing a <script> tag to contain a link to a shared JS file.

   

4. After you've done this, save your document and Preview in Browser. If you did everything correctly, the behavior should still work.

The major benefit of creating JS files is that you can reuse them in other HTML documents. To reuse a shared behavior:

1. Open another document in which you want to use the same behavior. Don't apply the behavior yet!

2. Go to View > Head Content.

3. Open the Assets panel, and choose to view Scripts. Your shared JS file will appear there.

4. Drag the shared file from the Assets panel to the head content bar in your Document window. If you examine your code after having done this, you'll see that a link to the shared file has been added. (See Figure 16.14.)

   Figure 16.14. Using the Assets panel to link a new HTML document to the shared JS file.

   

5. Now you can apply any behavior that uses the functions in the shared JS file. Dreamweaver will know not to add the functions to your document, because they're already present in the shared file.

Note

If you love the idea of sharing functions, but want some help with it, try Paul Boon's "Create and Hot Swap JS Files From Script Tags" extension, available from the Macromedia Exchange.

Summary

Behaviors go a long way to giving your web page advanced functionality and that professional flair. They enable you to go well beyond the limitations of basic HTML.

Other behaviors are available, and these are discussed throughout the book in chapters relevant to their specific functionality. You also can download and install any other functions in Dreamweaver that will go beyond the set included here. You can find these at the Macromedia Exchange for Dreamweaver. The Macromedia Exchange for Dreamweaver is discussed in Chapter 35.

In the next chapter, you will learn about even more behaviors and how they relate to using layers in your page design.

CONTENTS