Working Smart with Behaviors

[ LiB ]

The fun of using Dreamweaver behaviors is what you can do with specific behaviors to snazz up your page or make it that much more functional. The hard part is getting used to the quirks each behavior brings with it and knowing how to use each one well.

The Ins and Outs of Selecting Linked Images

If you want a behavior to be triggered by rolling over or clicking an image, you have a choice: Make the image a null link and attach the behavior to the a tag, or attach the behavior directly to the img tag. The first gets coded like this:

 <a href="#" onMouseOver="  [behavior code]  ">   <img src="dog.jpg"> </a>

The second gets coded like this:

 <img src="dog.jpg" onMouseOver="  [behavior code]  ">

There are two advantages to creating a link and using that to trigger the behavior. First, if the image is a link, the cursor will change when the user rolls over it, which means that the user is more likely to recognize this as something he can interact with and click on. Second, Netscape 4 doesn't support attaching behaviors to the img tag, so the behavior might not work unless you attach it to a surrounding link.

Because Netscape 4 doesn't support adding actions to images, if you have your Behaviors panel set to display events for 4.0 and Later Browsers, or 3.0 and Later Browsers, Dreamweaver won't let you assign an action directly to an image. If you select an image and choose a behavior, the program looks for a link surrounding the image. If there isn't one, it adds a null link. Then it attaches the behavior to that link.

To make the whole process more user-friendly, however, Dreamweaver still treats the behavior as if it were associated with the image. If you select the image, the Behaviors panel will display the behavior, but with an <A> indicator in the event handler area (see Figure 13.3). (Previous versions of Dreamweaver displayed the event handler in parentheses.)

Figure 13.3. The Behaviors panel showing behaviors for a link surrounding the selected image.

This means that the actual code for the behavior has been put in the a tag. You can inspect and edit the behavior, even though, strictly speaking, the tag that you have selected ( img ) has no behaviors attached to it.

But what if you want your behavior attached to the image itself and not the link? Select the image, find the behaviors with the <A> event handlers, and use the drop-down menu to assign a non- <A> event handler (see Figure 13.4). This moves the code from the link to the image. Note that to show event handlers for the image itself, you need to show events for one of the later browser versionsI.E. 4+ or Netscape 6.

Figure 13.4. Reassigning the event handler to attach a behavior to an image instead of its link.

Targeting Multiple Audiences: The Check Browser Behavior

With the Check Browser behavior (see Figure 13.5), 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.

Figure 13.5. The dialog box for the Check Browser behavior.

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 browser 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 need at least three browsers installed. Also, you need to make pages that let you know that it is working. For instance, you 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 of ways to set this up. Because 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 browsers that don't support JavaScript or 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?". Those with version 3 browsers can be sent somewhere else.

For this example, you will set up the behavior so that the other browser will stay on the same page and so that 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 such as Netscape 3 and 6, and IE 4 or above.

With the initial or JavaScript-free page open , click on the plus (+) button of the Behaviors panel. Choose Check Browser.
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 above 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. For Otherwise, choose Stay on This Page.

For Other browsers, choose Stay on This Page.
Save and preview in the various browsers to confirm that everything is working as planned.

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 that user 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, be sure to test all your functionality as you go.

Tiny Bits of Hand-Coding : The Call JavaScript Behavior

Call JavaScript is a behavior that inserts JavaScript code that you write yourself. Instead of inserting some prewritten JavaScript action, however, the behavior adds whatever JavaScript statement(s) you specifically tell it to add. To use this behavior, open a document; select the element that you want to trigger the behavior; and, from the Behavior panel's Actions list, choose Call JavaScript. In the dialog box that appears, type in whatever JavaScript statement or statements you want to execute (see Figure 13.6). Separate multiple statements with semicolons.

Figure 13.6. The Call JavaScript behavior in action, being used to insert a simple one-line chunk of JavaScript code.

This is a handy behavior for quickly adding bits of JavaScript code to a document, without having to worry about coding event handlers, functions, and function calls, and even without having to leave Design view. Of course, you can't really use the behavior unless you know enough JavaScript syntax to know what code you want to add, so it's not for everybody. But if you want to dip your toes in the JavaScript waters just a bit without having to master event handlers and such, Call JavaScript might be just what you need. Table 13.1 shows some handy one- and two-line code statements that can be entered into the Call JavaScript dialog box.

Table 13.1. Some Simple JavaScript Statements to Use with the Call JavaScript Behavior

JavaScript Code	What It Does	Special Instructions
`history.back()` `history.forward()`	Sends the browser back or forward as if the user had clicked the browser's Back or Forward buttons .
`window.close()`	Closes the current browser window. This is useful when multiple browser windows are open.
`window.resizeTo` ( width, height )	Resizes the current browser window to the specified dimensions. This is handy when the page first loads. Select the body tag and attach it using the onLoad event.	Substitute numbers for width and height.
`document.` `formname.` `textfieldname.` `focus()`	Puts the insertion point in a specified text field, in a specified form. This is useful when a page contains a form because the user can immediately start typing in the first text field as soon as the page loads. Select the body tag and attach it using the onLoad event.	Substitute the name of your form and the name of the text field you want to put the insertion point in.

Note for hand-coders: Because Dreamweaver behaviors must always insert their JavaScript as a noncustomizable function and a function call with parameters, Call JavaScript can lead to more cumbersome coding than if you just dipped into Code view and added the code there. For more on Dreamweaver's JavaScript tools, including Call JavaScript, see the section "Writing JavaScript in Dreamweaver" in Chapter 27, "Writing Code in Dreamweaver."

Opening New Browser Windows: Beyond the Simple Pop-Up

The Open Browser Window behavior (see Figure 13.7) opens a new browser window. You can specify what page appears in that window, and you get to determine exactly what the window looks like: how big it is, whether it's resizable, and even what bits of window "chrome" (button bar, status bar, scrollbars, and so on) it displays. This behavior is great when you want a message to pop up, but you want it to look nicer than the generic browser alert window called up by the Show Pop-Up Message behavior; or when you want to open a page in a new window, but you need more control than simple _blank targeting can offer.

Figure 13.7. The Open Browser Window dialog box.

You don't need to use JavaScript just to display a web page in a new browser window. You can accomplish that with a standard hyperlink by setting its target attribute to _blank . With this targeting method, however, you can't control the size or appearance of the browser window. For that, you need the behavior.

To use the Open Browser Window behavior, start by creating or getting the URL for the page that you want to appear in the new window. Then open the page that you want to trigger the behavior from; select a page element; and, from the Behaviors panel's Actions list, choose Open Browser window.

In the dialog box that appears, enter the specifics for the new window.

If you want to make sure your visitors don't mistake this new window for the main browser window behind it, and if you want to save screen space, don't turn on all the chrome elements. In fact, most designers leave most of them off (see Figure 13.8). But it's a good idea to leave the resize control and scrollbars on, in case your users need them.

Figure 13.8. A little browser window, with and without chrome.

It's also a good idea to give the new window a name (a simple, one-word name will do). Why? If your main page has several links to new windows, or if the user clicks on your one link to the new window several times, you probably don't want this to open multiple new windows. It can get awfully crowded in there! But if the new window has a name, the browser knows not to open more than one of it. If you call your window mini , for instance, and the user opens it, loses it behind something else, and then tries to open it again, the browser will see that mini already exists and will bring it to the front instead of spawning another window.

It's not the most common situation in the world, but if you want to include a link in the main window that changes the page in the new window, you can use the new window's name as the link's target, like this: <a href="otherpage.html" target="mini"> .

Window Size Issues

When deciding what size to make your window, be aware that not all browsers or platforms size their windows the same. (Table 13.2 shows some sample size variances.) You don't want content failing to display properly because the window isn't big enough.

Table 13.2. A 400 x 400 Browser Window As It Displays in Different Platform/Browser Combinations

Platform	Browser	Viewable Window Area
Windows	IE	400 x 400 (no chrome) 385 x 420 (all chrome)
Windows	Netscape/Mozilla	400 x 400 (no chrome) 400 x 400 (all chrome)
Mac	Safari	400 x 400 (no chrome) 400 x 350 (all chrome)
Mac	IE	415 x 415 (no chrome) 415 x 415 (all chrome)
Mac	Netscape/Mozilla	400 x 400 (no chrome) 400 x 400 (all chrome)

Window Placement

By default, the new browser window that opens appears tucked up into the upper-left corner of the user's screen. Unfortunately, the behavior doesn't include an option for changing that. But you can fix that if you don't mind just a small amount of hand-coding.

When the behavior is in place in your document, go to Code view and look in the head section for this function:

 function MM_openBrWindow(theURL,winName,features) { //v2.0   window.open(theURL,winName,features); }

Determine, in pixels, how far away from the upper-left corner you want the window to appear. You need to supply it as x,y coordinates (x = horizontal, y = vertical). Then add the following to code to the function:

 function MM_openBrWindow(theURL,winName,features) { //v2.0  newWin  = window.open(theURL,winName,features);  newWin.moveTo(x,y);  }

For x and y, substitute the horizontal and vertical coordinates you determined earlier.

Or, if you're up to a slightly longer bit of typing, you can get the window to center itself on the user's computer screen, no matter what size it is. Instead of the previously added code, change the function like this:

 function MM_openBrWindow(theURL,winName,features) { //v2.0  newWin = window.open(theURL,winName,features);  newWin.opener.name="main";  newWin.moveTo((screen.width/2)-200,(screen.height/2)-200); }

This one's trickier because you have to watch out for all those parentheses in the fourth line. But that's all there is to it! Note, however, that the code written here centers a 200 x 200 browser window. Change the occurrences of 200 in the fourth line to the width and height you have specified for your new window.

Be aware, though, that after you've made these tweaks, this isn't a plain out-of-the-box Dreamweaver behavior anymore. If you edit it through the Behaviors panel, your custom code can be overwritten.

Closing the New Window

All of your computer-savvy users will know how to close the new little window you've opened by clicking its Close box. But it's a nice idea, for those who don't know, to give them an easy-to-see little Close button in the window itself (see Figure 13.9). It's just a matter of opening the page that will display in the little window, adding a text or graphic link to its layout, and attaching a bit of JavaScript to it that tells the browser to close the window. Dreamweaver has no behavior for this, but it's so easy that there's not much need for one. Just select your Close text or graphic and, in the Property Inspector's Link field, type this:

Figure 13.9. A little browser window with a Close button.

 javascript:window.close()

Figure 13.10 shows how the whole procedure looks in Dreamweaver.

Figure 13.10. Creating the Close button for display in a little browser window.

This short bit of JavaScript code could also be added using the Call JavaScript behavior. The resulting code that gets added to your page is more compact if you add the code through the Link field, however.

Creating a Controller Window

One possible use for a small new browser window is to contain links to exciting places in the main website (see Figure 13.11). Some designers refer to this as a controller window. It works this way: The links in the small window are regular hyperlinks that are targeted to the main window, so clicking them opens the linked page in that window. The trick is, the main window needs to have a name to use as the target value.

Figure 13.11. A controller window with links that should load in the main browser window.

Controller windows can also be used to open a third browser window and control the pages that appear in that window. In these cases, the main window sits behind the two new windows.

Naming the main window is usually done by the same script that opens the new windowthe Open Browser Window behavior, in other words. By default, the behavior doesn't do this, but, guess what? A little code tweaking can easily meet this challenge.

When the behavior is in place in your document, go to Code view and look in the head section for this function:

 function MM_openBrWindow(theURL,winName,features) { //v2.0   window.open(theURL,winName,features); }

Now change it to look like this:

 function MM_openBrWindow(theURL,winName,features) { //v2.0  newWin  = window.open(theURL,winName,features);  newWin.opener.name="main";  }

You can substitute any one-word name you like for main . Just remember what you enter here because you'll need it for targeting your links later.

Exercise 13.1. Creating a Pop-Up Controller Window

In this exercise, you'll create a miniwindow that pops up from the Kenswear home page, directing visitors to highlighted pages within the site. If you haven't done so yet, download the chapter_13 folder from the book's website at www.peachpit.com and create a site with this as the root folder. The files for this exercise are in the ken folder.

In the ken folder, open index.htm . This is Ken's home page, which links to his three main departments (Sportswear, Formalwear, and Businesswear). There's also a What's New? button pointing visitors directly to whatever pages Ken wants to highlight this month.

Also open whatsnew.htm . This is the file that will appear in the pop-up window.
In the index.htm file, select the What's New? button. This button needs to trigger behaviors without actually linking anywhere , so in the Property Inspector's Link field, type javascript:; .
With the button still selected, open the Behaviors panel, click the + button, and choose Open Browser Window. When the dialog box appears, enter whatsnew.htm in the URL field (or you can browse to this file). Set the size to 300 x 300 and leave all chrome elements turned off. Name the window whatsnew (see Figure 13.12). Click OK to close the dialog box.

Figure 13.12. Configuring the Open Browser Window behavior for the Kenswear site.

Preview the page in a browser. Clicking the What's New? button opens a little window with the whatsnew.htm page displayed in it.
The whatsnew.htm page has a Close button in it so that users know for sure how to get rid of the window. Open that file (if it's not already open) and select the Close button. In the Property Inspector's Link field, type javascript:window.close() .

To see this effect in the browser, go back to index.htm and preview it in the browser. Click What's New? to open the little window, and click Close to close it.
Next , refine the behavior so that it moves the window away from the upper-left corner of the screen and sets the scene for linking back to the main window. In index.htm, switch to Code view and examine the document head. There are a lot of functions in there! Find the MM_openBrWindow function and change it to look like this (new code is in bold):
```
 function MM_openBrWindow(theURL,winName,features) { //v2.0  newWin  = window.open(theURL,winName,features);  newWin.moveTo(200,200);   newWin.opener.name = "main";  } 
```
When you're done, preview it in the browser to make sure the behavior still works and that it moves the window away from the upper-left corner.
Now it's time to take advantage of that code by putting links into the pop-up window. In whatsnew.htm , select the link to the tuxedo page. In the Property Inspector, browse to formalwear/tuxedo.htm for the Link and enter main into the Target field (see Figure 13.13).

Figure 13.13. Targeting a link from the pop-up window to its parent.

Try it! Save the What's New file and then go back to the home page and preview it in the browser. You should be able to open the little window and then click the tuxedo link to change the main window.

Note that, when you click the link in the little window, the main window regains focus and comes to the front. The little window hasn't closedit's just behind the main window. If you want the controller window to remain visible, go back to the What's New file, use the Tag Selector to select the body tag, and in the Behaviors panel, click the + button and add the Call JavaScript behavior. When the dialog box opens, enter the following in the code field (see Figure 13.14):

Figure 13.14. Using the Call JavaScript behavior to ensure that the What's New window stays in front of other browser windows.
```
 window.focus() 
```
Click OK to close the dialog box. In the Behaviors panel, change the event from onLoad to onBlur . What does this do? Every time the whatsnew window loses focus (gets sent to the back), it brings itself back to the front. Now when you try the site, clicking the tuxedo link in the What's New page changes the page in the main window, but doesn't hide the little window.
It's time to see how naming the little window works. Open business-wear/index.htm and select the What's New? button there. Repeat what you did in steps 2 and 3 to add a null link to the button, and use it to open a new browser window. Use the same settings as before for the new browser window, and make sure you name the window whatsnew , just like you did before.

When you've done this, try the site in a browser. Start on the home page, and click the What's New? button to open the little window. Leaving the little window open, go back to the home page and click the Businesswear link. This takes you to the page where you just added the second Open Browser Window behavior. Click the What's New? button on this page. Instead of opening a new window, the original little window just comes to the front!

Advanced Image Swapping: Disjoint Rollovers

Swap Image (see Figure 13.15) is undoubtedly the most popular of the Dreamweaver behaviors because it's nice and stable and it creates rollovers. Everybody loves rollovers! In the world of web design, they've become an expected way of making buttons announce to the world that they're buttons and can be clicked on. But Swap Image can also be used to create more complex effects, such as disjoint rollovers.

Figure 13.15. Dialog box for the Swap Image behavior.

Swap Image and Disjoint Rollovers

The Swap Image behavior changes the value of the src property of an img tag so that another image is displayed in the original image's place. No rule says that the image being swapped has to be the image that the behavior is attached to. When the behavior is triggered, it can swap any image in the current document. When an image swaps because the user clicked on or rolled over something other than the image itself, it's referred to as a disjoint , or complex , rollover.

Only a few rules are involved in working in Swap Image:

The behavior can swap only one image for another; it can't make an image appear where there was none before. But one image can be an invisible image, such as a spacer GIF.
The original image and the swapped image will display with the same width and height, so it's best if they're the same size to start.
The images must be namedthat is, the Image Property Inspector must show a one-word name in the Name field in its upper-left corner. If you don't supply a name, Dreamweaver assigns a default (Image1, Image2, and so on). But for complex situations such as disjoint rollovers, this is very hard to work with, so it's best to name the image before beginning. And don't change the names when the behavior is in place!

The Swap Image behavior is easier to understand if you remember that the img tag itself is just a placeholder in the document, where the browser is reserving space and expecting to display an image. The src attribute determines which image will fit into the space. The width and height attributes determine how much space to reserve. The Swap Image behavior swaps only the src , not the width or height . That's why the swapped image must display at the same size as the original. On another note, that's also how Dreamweaver's Placeholder Image object works, by creating an img tag with no src .

Creating a Disjoint Rollover

To build a disjoint rollover, make sure you have a named image in your document and another image file somewhere in your site ready to swap for it. Then do this:

Select the page element that should trigger the swapping. This can be another image, a piece of linked text, or whatever you like.
In the Behaviors panel, click the + to access the Actions list, and choose Swap Image.
When the Swap Image dialog box appears, take a look at the list of images in the upper portion of the window. That's a list of all images in your document, identified by name. If you currently have an image selected in the document, it will be selected here.

In the list of images, select the name of the image that you want to swap. (See why it's important to name things?)
In the lower half of the dialog box, browse to select the image you're swapping with. Notice that the image list now shows an asterisk next to the name you had selected. This image will be swapped.

When you're done choosing images to swap, make sure the Preload Images and Restore on MouseOut options are set the way you want them, and click OK.

Performing Multiple Image Swaps

Not only can you swap any image with the Swap Image behavior, but you can also swap more than one image at a time with the same behavior. For instance, you might have a navigation bar button selected. You can assign one Swap Image behavior that will create a standard rollover and swap some other image on the page at the same time.

To perform multiple image swaps at once, go through the steps outlined in the previous section, but before closing the dialog box, repeat steps 3 and 4 to swap another image. Do this as many times as you want. Each image that will be swapped shows up in the dialog box's image list with an asterisk by its name, so you can spot them easily as you're scrolling through the list.

Swap Image and the Different Event Handlers

You're also not limited to swapping images on rollover. Maybe you want the image to change when it's clicked on instead of when it's rolled over, or in addition to the rollover swap. You can swap images for onMouseOver , onMouseDown , onMouseUp , onClick , or onMouseOut to create some interesting interactive image effects! (Remember to check that your target browsers support the events you use, though.)

Exercise 13.2. Creating a Clickable Slide Show with Swap Image

In this exercise, you'll use some fancy image-swapping to create a clickable slide show for an art gallery. If you haven't done so already, download the chapter_13 folder from the book's website to your hard drive and define a site with this as the root folder. The files for this exercise are in the chapter_13/gallery folder.

Start by opening index.html and examining it. It contains a table-based layout consisting of a title picture and four numbered buttons, separated by a transparent spacer graphic (see Figure 13.16).

Figure 13.16. The Indian Art Gallery page, ready to house a slide show.

Pay particular attention to the images. Select each, and you'll see that they all have names that are descriptive of the purpose they'll have in the slide show: pic, pictitle, one, two, three, and four. The name of the spacer graphic (pictitle) tells that it's doing more than taking up space here! It's going to be swapped for other images as the slide show progresses.
Clicking the first button needs to make a picture appear in place of the introductory slide (the image named pic) and needs to make that picture's title appear in place of the spacer graphic (the image named pictitle).

Select the One button. In the Behaviors panel, click the + and choose the Swap Image behavior from the Actions list. Do you recognize your named images in the image list? This list is a lot less daunting when your images have descriptive names.

You want to swap the pic image, so select pic from the image list. Click the Browse button and choose sunchief.jpg from the gallery/images folder.

You also want to swap the pictitle image, so select pictitle and then browse to the sunchief_title.gif image from the gallery/images folder. Do you see how asterisks are appearing by the names of images you've swapped?

Finally, you do want to preload images, but you don't want to restore on mouseOut because these aren't going to be rollovers. Deselect that option. Figure 13.17 shows what your settings should look like at this point. Click OK to close the dialog box.

Figure 13.17. The Swap Image dialog box showing settings for swapping the pic and pictitle images, without restoring them upon onMouseOut.
Examine the Behaviors panel, and you'll see that the behavior has been added with a default event of <A>onMouseOver (the <A> means a null link was created, which is fine). Select this event and, from the drop-down menu, choose <A>onMouseUp or <A>onClick . If neither of those events shows up in your list, click the + button and, from the bottom of the Actions list, choose Show Events For > 4.0 and Later Browsers.
Preview in the browser to see what happens when you click the One button. Both images change!
You're on your own for this one. Repeat the previous steps so that the Two button shows the lizard , Three shows the buffalo, and Four shows the fish. The image filenames make it clear which one is which. When you're done, you should be able to preview in the browser and click on any numbered button to view a picture and its title.

(Are you wondering why the pictures and their associated titles are in separate images? For optimization, the pictures need to be JPGs and the titles need to be GIFs.)
Now for some extra fancy stuff. You want each button to be visibly selected while its picture is showing. To do this, you're going to swap more images; this time, each button will swap for a selected version of itself when it's clicked on.

Select the One button and go to the Behaviors panel. Because you want to swap the button graphic upon onMouseUp or onClick , and you already have a Swap Image behavior for that event, you don't need to add another one. Instead, double-click on the behavior's name in the panel to open it for editing.

When the dialog box opens, pic and pictitle both have asterisks by their names, to indicate that they're already being swapped. Make sure the image named One is selected (it should be, by default) and browse to one_selected.gif in the gallery/images folder. Click OK to close the dialog box.
Repeat this procedure to swap the other three buttons with their selected versions (again, the filenames should be self-explanatory).

Now preview in the browser again. Clicking the One button should change it to black, as well as display the sunchief picture and title. Clicking the Two button changes it to blackbut the one button is still black! Eventually, all of your buttons will turn black because you haven't restored any of them.
You might think of using the Swap Image Restore behavior for this, but that's a very specialized behavior that works only in straightforward rollover situations. Instead, you need to do some more swapping.

Select the One button and, in the Behaviors panel, open its Swap Image behavior up for editing. In the image list, select Two. When the One button is clicked, Two should revert to its nonselected state, so swap this image for two.gif (in the gallery/images folder). Select Three and swap it for three.gif; then select Four and swap it for four.gif . You don't know which of these may be selected when the user clicks the One button, so you'll swap them all.

Repeat this procedure for the other three buttons. By the time you're done with each Swap Image dialog box, all of the images in the image list should have asterisks. By the time you're done with the whole project, you should be pretty comfortable swapping images! Figure 13.18 shows the finished slide show in action.

Figure 13.18. The Indian Art Gallery slide show in its final form.

Cascading Menus the Easy Way: The Show Pop-Up Menu Behavior

The Show Pop-Up Menu behavior (see Figure 13.19) lets you create a submenu of links that will appear when the user clicks on a link on your page. This behavior is modeled after the behavior of the same name in Fireworks MX 2004, although, unlike its Fireworks cousin, it creates only text-based menus, where Fireworks can also generate image-based menus. If you open a document in Dreamweaver that contains a Fireworks-generated pop-up menu, Dreamweaver recognizes the code as a pop-up menu.

Figure 13.19. Dialog box for the Show Pop-Up Menu behavior.

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:

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 a URL. You can set the target here if you are using Frames.
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.
When you have completed adding your menu items, go to the Appearance tab. Here you determine the look of your menus.
Select whether this will be a vertical or horizontal menu. The Preview area gives 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.
When set there, go to the Advanced tab. Here you can specify specific settings of your menu. Because 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.)
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 want, you can specify any pixel number for the X and Y values.
Click OK, and your pop-up menu is built. It will not show up in the Design window, so choose Preview in Browser to see it in action.

Exercise 13.3. Building a Pop-Up Menu

In this exercise, you 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, download the chapter_13 folder from the book's website to your hard drive. Define a site called Chapter 13, with this folder as the local root folder.

Open a new HTML document and save it as pop_up.htm .
Insert the navigation.gif image (from the chapter_13 folder on the website) onto the page. Make sure that it is selected on the page.
In the Behaviors panel, click the plus (+) button and select Show Pop-Up Menu. The wizard shown in Figure 13.19 displays.
In the contents panel, type Macromedia in the Text field. In the Link field, type http://www.macromedia.com .
Click the plus (+) button. Type Dreamweaver . In the Link Field, type http://www.macromedia.com/dreamweaver .
Click the plus (+) button again and type Fireworks . In the Link field, type http://www.macromedia.com/fireworks .
Click the Indent Item button. This indents Page 3 relative to Dreamweaver and creates another level of pop-up menu.
Click the Appearance tab. This panel is where you determine the look of the menu.
You can choose between Vertical Menu and Horizontal Menu. Look at both options, but choose Vertical Menu. Leave the rest of the default options.
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.
Go to the Position tab. This menu enables 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!
Click the leftmost button. This makes the menu appear from the lower-right corner of the image.

The Hide Menu on the onMouseOut Event option should be checked. This makes the menu disappear when you move off it, and it adds a Hide Pop Up Menu behavior to your Behaviors list. This behavior is used only in conjunction with a pop-up menu and should be added only with this check box.
Click OK to create the menu. It will not be functional in the Design window.
Preview in the browser and test your menu.

Efficiency Enhancer: Externalizing Your Behavior Code

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 it also trims download time and browser overheadespecially if the code is extensive . 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 even helps 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, follow these steps:

Open an HTML file that contains one or more applied behaviors that you know you'll be reusing in other documents.
In Code view, scroll to the <head> section of the document and find the <script> tag containing your behaviors' functions.
Select everything between the opening and closing <script> tags (but not the tags themselves ), and select Edit > Cut (see Figure 13.20).

Figure 13.20. Removing a behavior's function from the document <head> .
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.
When the new file opens, place the insertion point on a new line after the opening comments and choose Edit > Paste (see Figure 13.21).

Figure 13.21. Adding the behavior function to a new shared JS file.
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.)
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:

Go to View > Head Content so that the Document window shows the little gray strip of icons that represent your document head.
Find and select the script icon. (This should select the now-empty <script> tag from which you removed the functions.)
In the Property Inspector, find the Src field. Click its Browse button, and browse to the shared JS file. (See Figure 13.22).

Figure 13.22. Changing a script tag to contain a link to a shared JS file.
After you've done this, save your document and select 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, follow these steps:

Open another document in which you want to use the same behavior. Don't apply the behavior yet!
Go to View > Head Content.
Open the Assets panel, and choose to view scripts. Your shared JS file will appear there.
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 13.23).

Figure 13.23. Using the Assets panel to link a new HTML document to the shared JS file.
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.

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.

Thinking Outside the Box: Hijacking Function Calls

When 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 enabling you to attach behaviors to elements not normally allowed by the Dreamweaver interface. For instance, you can call behaviors from within media elements, such as Flash or QuickTime movies. You can even call behaviors from within other behaviors.

It works like this:

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).
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 Pop-Up 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 in a browser to make sure it does what you need it to do.
In Code view, find the code for your text link (see Figure 13.24). It will include the function call from the behavior, like this (function call is shown in bold):

Figure 13.24. Creating a function call by applying a behavior to a temporary text link.
```
 <a href="#" onMouseOver=  "MM_popupMsg('Hello, world!')"  >click  me</a> 
```
Select and copy the function call codeall the code between the double quotes, starting after onMouseOver= (just like the bold code shown here). Don't include the quotes themselves, though!
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 javascript: and then paste your function call (see Figure 13.25). For the Pop-Up Message behavior, the call should be javascript: MM_popupMsg('Hello, world!') .

Figure 13.25. Adding the borrowed function call to a Flash object.
Delete the temporary text link. Be careful here, however! If you just select the link in Design view and delete it, Dreamweaver removes the function as well as the function call. Instead, go to Code view and delete the item there. (After you've deleted the link, look through the document head to make sure the main function is still present.)

See Chapter 14, "Controlling Layers with JavaScript," for examples of using this technique to call behaviors from other behaviors. See Chapter 16, "Building Web Pages with Flash," for examples of using the technique with media elements.