Adding behaviors to your Web page
Creating image rollovers
Using the Swap Image behavior
Launching a new browser window
Editing your behaviors
Enhancing Dreamweaver with extensions
Want to add cool effects like rollovers and pop-up windows? Dreamweaver's behaviors make it easier than ever to create these kinds of interactive features with a JavaScript scripting language.
Behaviors are ready-to-use scripts that can be customized to create a variety of features. You can apply behaviors to almost any element on an HTML page and even to the entire page itself. For example, you can use the Swap Image feature to create an interactive slide show or the Open Browser Window option to play a video in a small, separate browser window.
In this chapter, I introduce you to the Behaviors panel and show you how to use some of Dreamweaver's most popular options.
When you start working with behaviors in Dreamweaver, you can get up and running more easily if you start with this basic introduction to how they work and the terminology they use. When you set up a behavior, you can choose from a number of triggers, or events, such as OnMouseOver or OnClick. Consider this slightly corny example: If you tickle someone and make the person laugh, you used an event to trigger an action. Dreamweaver would call the tickling the event and the laughter the action. The combination is a Dreamweaver behavior.
You may already be familiar with the rollover behavior, when one image is switched for another. In a rollover, putting your mouse over an image is the event. The action is the switching of the original image for another image, as shown in Figure 10-1. Rollovers are common in navigation. You can create rollovers with simple effects that use two images, as long as the images are exactly the same size. Alternatively, you can use the Swap Image behavior to create much more complex effects, such as causing any or all the images on a page to change when any other element is triggered.
Figure 10-1. When a cursor rolls over one of the images on this page, a second image is displayed in its place.
Dreamweaver includes about 20 behaviors, and you can download and install more. (You find instructions in the "Installing New Extensions for Behaviors" section, at the end of this chapter.)
Specifying the target browser for behaviors
In addition to the behaviors loaded on your computer, the number of behaviors available in the Behaviors panel is controlled by the Show Events For setting, which enables you to see only those behaviors that will work in the target browser for your site. To access these options, follow these steps:
Choose Window
Behaviors to open the Behaviors panel.
Click the small arrow just under the plus sign and select Show Events For (second from the last at the bottom of the drop-down list).
Select the HTML level or browser versions you want to target.
In the example shown in the figure, I chose IE 6. The higher the browser version you select, the more behaviors are available. When you specify a target browser, you limit the behaviors to only those that will work in the selected browser and later versions. Behaviors that aren't supported by that browser version are dimmed and unavailable. Note: Behaviors may also be dimmed if they aren't available for a selected element.
Check out Chapter 1 for more on browser differences and selecting a target browser.
Rollover images, as the name implies, are designed to react when someone rolls a cursor over an image. The effect can be as dramatic as a picture of a dog being replaced by a picture of a lion, or as subtle as the color of a word changing as one image replaces another. Either way, this is one of the most common JavaScripts in use on the Web and it's such a popular feature that Dreamweaver includes a special dialog box just for rollovers.
In the section that follows, you find instructions for using the Behaviors panel, where Dreamweaver stores most of the Behaviors included in the program. In this section, you find instructions for using the Insert Rollover Image dialog box, which makes creating a simple rollover effect one of the easiest behaviors to apply.
Tip
You can create more complex rollover image effects, with the Swap Image option from the Behaviors panel, which makes it possible to change multiple images at the same time, as you see in the following section.
To create a simple rollover effect with Dreamweaver's Insert Image Rollover dialog box, follow these steps:
Place your cursor on the page where you want the rollover to appear.
Rollover effects require at least two images: one for the initial state and one for the rollover state. You can use two different images or two similar ones, but both should have the same dimensions. Otherwise, you get some strange scaling effects because both images must be displayed in exactly the same space on the page.
Choose Insert
Alternatively, you can use the drop-down list available from the images icon in the Insert panel and select Rollover Image.
The Insert Rollover Image dialog box appears, as shown in Figure 10-2.
In the Image Name box, name your image.
Before you can apply a behavior to an element, such as an image, the element must have a name so that the behavior script can reference it. You can name elements anything you like as long as you don't use spaces or special characters.
In the Original Image box, specify the first image you want visible. Use the Browse button to locate and select the image.
If the images aren't already in your site's root folder, Dreamweaver copies them into your site when you create the rollover. (If you haven't already defined your site in Dreamweaver, see Chapter 2 for more on this important preliminary step.)
In the Rollover Image box, enter the image you want to become visible when visitors move their cursors over the first image.
Again, you can use the Browse button to locate and select the image.
Select the Preload Rollover Image check box to load all rollover images into the browser's cache when the page first loads.
If you don't choose to do this step, your visitors may experience a delay because the second image won't be downloaded until a mouse is rolled over the original image.
In the When Clicked, Go to URL box, enter any Web address or browse to locate another page in your site that you want to link to.
If you don't specify a URL, Dreamweaver automatically inserts the
#sign as a placeholder in the code.Warning
The # sign is a common technique for creating links that don't link anywhere. Because there are many great uses for rollover images that don't link to another page, this is a useful technique. Just remember that if you do want your rollover to link, you need to replace the # sign with a link to another page.
Click OK.
The images are set up automatically as a rollover.
Dreamweaver offers a number of behaviors you can choose from, including the Swap Image behavior and the Open New Browser Window behavior covered in detail in the next two sections. The process of adding other behaviors is similar to these two, but each behavior has its quirks. The tips and tricks you find here can help you get started with behaviors, find out where the majority of Behaviors features are in the program, and how you match behaviors with triggers using the Behaviors panel.
Before you start creating a more complex page design with Dreamweaver's Swap Image behavior, first take a look at the finished page so you can see the result before you get into the details. Notice in Figure 10-3 that a collection of thumbnail images is on the right side of the page and a larger version of one of those images is displayed on the left side in the main area of the page.
Notice in Figure 10-4 that when the page is displayed in a browser and I roll my cursor over another of the thumbnail images on the right, the larger image displayed on the left changes. With the Swap Image behavior, you can replace any or all the images on a page.
Follow these steps to use the Swap Image behavior:
Create a page design with all the images you want displayed initially.
In the page design I created for these photos from India, the initial page design includes all thumbnail images positioned on the right, and the first of the big images displayed in the area on the left.
Figure 10-4. When you preview a behavior in a browser, you can see the effect of the Swap Image behavior when the cursor is rolled over an image.
Note
You can use the Swap Image behavior to change images on any Web page no matter how the layout is created. In the design featured in this lesson, I used CSS to create a layout with separate
<div>tags for each row of thumbnails on the right and another div tag for the bigger image on the left. These divs are positioned with CSS. (Find instructions for creating CSS layouts in Chapter 6.)Name your images in the Property inspector.
To target your images with JavaScript, which is how behaviors work, first give each image a unique ID. The image ID isn't the same as the image filename, although you can use the same or similar names. In this example, I gave each thumbnail image an ID of a letter, identifying the thumbnails in alphabetical order according to how I want them positioned. Thus, image a is the first image in the top-left row, image b is in the top right, and so on. You can name images anything you like as long as you don't use spaces or special characters. I find it helpful to use names that correspond to the image or its order. Using the same or similar IDs for your images as you use for the image filenames helps make it easier to match them when you create the behavior. For example, the filename for the thumbnail in the top-left row is
a_bridge.jpg, and I gave the same image the ID of a, as shown in Figure 10-5. Each of the other thumbnails is similarly named and identified to make it easy to match them as I create the Swap Image effects.In contrast, I'll replace the main image on the page with images that correspond to each of the thumbnails. I'll begin by inserting the main image of the boy getting his face painted, which I want to appear when the page is first loaded. I'll be replacing this image each time I set up a Swap Image for one of the thumbnails. Thus, naming this main image something simple and distinctive, such as
display_photoormain_photo, makes it easier to keep track of which image I'm replacing each time.Tip
Although Dreamweaver automatically assigns a name to each image you insert into a Web page, I find it easier to keep track when I set up the Swap Image behavior if I use names that describe the images or correspond to their order.
Choose Window
Behaviors.The Behaviors panel opens. You can drag the Behavior panel elsewhere on the page, and you can expand it by dragging its bottom or side. You may also want to close any other open panels to make more room by clicking on the dark gray bar at the top of any panel.
Select an image and choose the Swap Image behavior.
First click to select the image in the page that will serve as the trigger for the action. In this example, I'm using the thumbnail images as triggers, so I select them one at a time, starting with the
a_bridge.jpgthumbnail. With the trigger image selected in the workspace, click the Add Behavior arrow in the Behaviors panel (the small arrow under the plus sign) to open the drop-down list of actions and then select the action you want to apply. In the example shown in Figure 10-6, I selected the Swap Image action, which opens the Swap Image dialog box.Specify the images to swap.
In the Swap Image dialog box, select the ID for the image that will be replaced.,
In Figure 10-7, I selected the image with the ID
display-photo.Use the Browse button to select the image that will replace
display-photo.I selected the
a_bridge.jpgimage, which I carefully named to correspond to the matching thumbnail. Now when a user rolls a cursor over thea_bridgethumbnail image, the photo of the boy with the IDdisplay_photowill be replaced with the bigger version of thea_bridgeimage.
At the bottom of the Swap Image dialog box, select Preload Images to instruct the browser to load all the images into the cache when the page is loaded.
If you don't select this option, there may be a delay when the image swap is used.
Deselect the Restore Images OnMouseOut option if you wish.
The Restore Images OnMouseOut option means that when an event is completed (such as the mouse is moved off the triggering thumbnail), the original image is replaced. By default, Dreamweaver preselects this option for the Swap Image behavior, but in the example shown here, I deselect it because I found that replacing the original image each time I rolled the cursor over another thumbnail was distracting.
After you specify all the settings for the behavior, click OK.
The new behavior appears in the Behaviors panel.
Specify an event for the behavior.
After the action is applied, you can go back and specify which event will trigger the action (as shown in Figure 10-8). By default, Dreamweaver applies the
OnMouseOverevent when you use the Swap Image action, but you can change that to any available event, such asOnClick, which requires that the user click the image to trigger the Swap Image action. In this example, I leave it set toOnMouseOver.Note
The list of Behaviors and Events varies depending on the element selected, the applied behavior, and the target browsers specified in the program. For more information about events and what each one accomplishes, see the "Choosing an event for a behavior" section, later in this chapter. For more on browser differences, see the sidebar "Specifying the target browser for behaviors."
Tip
You can display or hide events by clicking the Show All Events icon in the top left of the Behaviors panel. Note that if you're using Windows, you also see a collection of events that begin with an <A> and are for elements that are linked.
Apply additional behaviors.
To apply the Swap Image behavior to other images on a page, repeat Steps 5–7, clicking to select the image you want to serve as a trigger and then specifying the corresponding image that should be swapped. In this example, I selected each of the thumbnails in turn and set up a Swap Image behavior that replaced the
display_photoimage with the corresponding larger version of the image in the thumbnail.Test your work in a browser.
You can't see the effects of behaviors like this one until you click on the Live View button at the top of the workspace in Dreamweaver or preview your page in a browser, such as Firefox or Internet Explorer. (If you want to see this example in action, visit Jasper Johal's photo site at
www.EastIndia.com.)
You can use behaviors in Dreamweaver to create many interactive features, such as opening a new browser window when someone clicks a link. As you can see in Figure 10-9, this is a great way to make supplemental information available without losing the original page a visitor was viewing. The Open Browser Window behavior enables you to specify the size of the new window and to display it over the existing window.
To add the Open Browser Window behavior to a selected image (or any other element) on a page, follow these steps:
Create the page that will open in the new browser window.
For this example, I created a new blank HTML page and inserted a larger version of the image that corresponds to the thumbnail I'll be using as a trigger. The goal is that when a user clicks the trigger image, a browser window will open that is sized exactly to fit the larger image but much smaller than the full browser window.
Figure 10-9. A larger version of the photo of pilgrims crossing the Ganges river is displayed in a new browser window when a user clicks the thumbnail version of the image.
Note
When you name files that will be used in behaviors, such as a page that will open when the Open Browser Window behavior is used, avoid using slashes anywhere in a filename or numbers at the beginning of a filename (you can use numbers anywhere else in the name). You can use hyphens and underscores.
Select the image, text, or other element you want to serve as the trigger for the action.
You can select any image, text, or layer on a page and apply a behavior to it the same way.
Choose Window
Behaviors to open the Behaviors panel.Click the plus sign (+) and choose the behavior you want from the drop-down list.
In this example, I selected the Open Browser Window behavior.
Note
If a behavior appears dimmed, it can't be associated with the selected element. For example, the Swap Image behavior can be applied only to an image, so it appears dimmed if you've selected text or another element.
In the Open Browser Window dialog box, as shown in Figure 10-10, specify the settings.
You can set a number of options that control how the new browser window appears:
Use the Browse button to the right of the URL to Display box to select the page you want to open in the new browser window. (You can also enter a URL in this box to open a page in another Web site.)
Set the window width and height to specify the size of the new browser window that will open. In this example, I set the width to the exact size of the image and made the height 20 pixels larger to provide a little breathing room under the painting name.
Select the options Navigation Toolbar, Location Toolbar, Status Bar, Menu Bar, Scrollbars as Needed, or Resize Handles if you want the new browser window to include any of these features. I selected Scrollbars as Needed in case my visitor's browser window is smaller than the size I specified for the photo, but I left all the others deselected because I want a clean, simple browser window without any menus or other features.
Name the new window, which is important if you want to target that same window to load other pages into it.
After you specify all the settings for the behavior, click OK.
The new behavior appears in the Behaviors panel.
To change the event that triggers your behavior, select the current event from the left side of the Behaviors panel.
In the Events drop-down list, select any available event to serve as the trigger for the behavior. For more information about events and what each one accomplishes, see the "Choosing an event for a behavior" section, later in this chapter.
To test the action, choose File
Preview in Browser.Click the image to test whether a new browser window opens.
You can attach multiple behaviors to the same element on a page (as long as they don't conflict, of course). For example, you can attach one action that's triggered when users click an image and another when they move their cursors over the image. You can also trigger the same action by using multiple events. For example, you can play the same sound when a user triggers any number of events.
To attach additional behaviors to an element, click the plus sign in the Behaviors panel and select another option from the pop-up list. Repeat this process as many times as you want.
You can always go back and edit a behavior after you create it. You can choose a different event to trigger the behavior, choose a different action, or remove behaviors. You can also change behavior options after a behavior is applied.
To edit a behavior, follow these steps:
Select an object with a behavior attached.
Choose Window
Behaviors to open the Behaviors panel.Here are some options you can choose in the Behaviors panel:
Change a triggering event: Choose a different event in the Events drop-down list in the Behaviors panel.
Remove a behavior: Click the action in the Behaviors panel to select it and then click the minus sign at the top of the pane. The behavior disappears.
Change parameters for an action: Double-click the gear icon next to the action and change the parameters in the dialog box that opens.
Change the order of actions when multiple actions are set: Select an action and then click the Move Event Value Up or Move Event Value Down buttons to move the action to a different position in the list of actions.
Even with all the cool features in Dreamweaver, a day will almost certainly come when you'll want to do things that Dreamweaver can't do with the features that shipped with the program. Fortunately, the programmers who created Dreamweaver made it possible for other programmers to add features with the Extension Manager. The result? You can add new functionality by adding extensions from a variety of third-party sources.
You can find extensions that do everything from adding highly customizable drop-down and fly-out menus to full-featured shopping cart systems. Keep in mind, however, that not all extensions are well supported and few come with good instructions. They're not all free, either. Some cost hundreds of dollars, but most are in the $20–$50 range. When you visit the Dreamweaver Exchange site, you find reviews and rankings to help you sort through the best options.
In the following steps, I explain how you find, download, and install a free Dreamweaver extension. Although how extensions work after they're installed can differ dramatically, the basic process of adding them to Dreamweaver is nearly the same.
Visit the Dreamweaver Exchange site.
Get to the Dreamweaver Exchange site by
Choosing Get More Behaviors from the bottom of the Behaviors drop-down list in the Behaviors panel.
Visiting
www.adobe.com/exchangeand following the link to the Dreamweaver section.Clicking the link in the bottom right of the Dreamweaver Welcome screen.
Note: If you launch Dreamweaver and find a link to download an update for Dreamweaver instead of the link to the Exchange site, by all means download and install the update first. After you're finished, the update link is replaced by the link to the Exchange site.
Sort through the many available extensions.
You'll find a wide range of extensions on the Dreamweaver Exchange site. You can search through extensions by category, keyword, and ranking options. Many of the extensions featured on the Exchange site include links to their creators' sites, where you'll often find even more extensions.
Select an extension and review its features.
When you click a link to an extension on the Exchange site, you'll find more information about the extension, including system requirements and the version of Dreamweaver that the extension was designed for. In general, you can use extensions designed for earlier versions of Dreamweaver in more recent versions. Be aware, however, that extensions designed for later versions of Dreamweaver usually won't work in earlier versions of the program.
Before you leave the extension's page, I highly recommend that you take the time to read the special instructions in the middle of the page.
Some extensions include important instructions, such as where you'll find the new feature in the Dreamweaver interface after it's installed and warnings that some of the functionality of an extension will work only when previewed on a live Web server (this is true for the random image extension, for example).
To download an extension, click the Download button (for free extensions) or the Buy button next to the extension name and save the extension to your hard drive.
Install the new extension after it's downloaded by choosing Help
Manage Extensions to open the installation dialog box.Most extensions require that you close Dreamweaver before installation, and most install with the click of a button. Dreamweaver's Extension Manager launches automatically to install most extensions.
In the Extension Manager dialog box, choose File
Install Extension and then browse your drive to select the extension file you downloaded.After the installation is complete, Dreamweaver displays instructions for using the extension. These are usually the same as the instructions included in the middle of the page on the Exchange site.
Note
Pay special attention to the part of the instructions that tells you where you'll find your newly installed extensions. Extensions may be added to menus, dialog boxes, and other parts of Dreamweaver depending on their functionality and how the programmer set them up, and it can be hard to find them if you don't know where to look.
Launch Dreamweaver and find the new menu option, button, or other interface feature that controls your new extension.
In many cases, all you have to do is open an existing page or create a new page in Dreamweaver and then open the newly added dialog box or select the new option from a menu.
Note
Adobe is constantly updating the Exchange site available by clicking on the Dreamweaver link at www.adobe.com/exchange. Visit it regularly to find new extensions you can download and install to enhance Dreamweaver's feature set.