Lesson 9 - Behaviors


DW Cover


Behaviors are JavaScript scripts that are already written and stored in Dreamweaver for your use. You don't have to know JavaScript to use them. Basically, you use a behavior by selecting an event, like onMouseOver, and associate a behavior, like Swap Image, with it. If this is your first time using behaviors, you'll be amazed to see the magic you can create with the click of a button.

Here are some things you can do using Behaviors in Dreamweaver

To add a behavior to a page you need to select an object and an event based on the browser flavor and version that will support that behavior. Then, you select the behavior that will be triggered by the object and event. Not all browsers support every behavior but you can select the browsers that you want for the design of your site and select the behaviors associated with those browsers.

Behaviors are event driven. The event can be a user event such as a onMouseOver or onMouseClick or a timed event such as a refresh of the page after a specified amount of time. Every event that is defined has an associated action. One event can be associated with several actions.

The Behaviors Panel

To get to the behaviors panel click on the Tag Inspector tab located in the CSS Styles panel or go to the Window menu located on the Dreamweaver menu bar, and select Behaviors, Window>Behaviors or use Shift + F4 keys.

Behavior Events


Notice that next to the Behaviors button it says Tag <p>. I positioned the cursor in a paragraph so the Behaviors Panel automatically shows the events that can be associated with the current element on the page. The available events are context sensitive, and will change based on which type of HTML object is selected on the page. You will see different events for the <img> tag than you will for a paragraph.

The + button, or Add behavior button, opens the list of behaviors available for the selected page element and event.

Behaviors


The behaviors included in Dreamweaver have been written carefully so that they will work correctly in all modern browsers, going as far back as Netscape Navigator 4.0 and IE 4.0. However, you may choose to target specific browsers by using the "Show Events For" entry near the bottom of the Add Behavior menu. Click this entry to select the browsers you wish to target with your behaviors.

Show Events for different Versions


If you are using a behavior on a linked item such as text or an image, make sure you deaden the link by inserting javascript:void(''); in the Link field of the PI before selecting your behavior. Note that the quotes are two single quotes.


Show/Hide Behavior

In this example I will show how to show-hide an AP Div when the mouse is rolled over it. I created two AP Div tags and overlapped them. Next, I clicked on the AP Div in the design view to select it. In the Tag Inspector tab I clicked on the Behaviors button and then selected onMouseOver behavior. I clicked on the Add Behaviors + button to bring up the list of behaviors and selected Show-Hide Elements. I clicked the Hide button so that when the mouse rolls on top of the AP Div it would disappear..

Show Hide Behavior

Hide Behavior

I noticed that after I clicked OK that the event had been changed to OnFocus which is not what I wanted.

Behavior OnFocus

I had to go back into the Tag Inspector Behaviors panel and click on onFocus and then select onMouseOver from the option menu to reset the behavior to onMouseOver.

Change behavior option menu

Here is the code that connects the behavior to apDiv1. When the mouse rolls over apDiv1 the onmouseover event is triggered and the function that we selected is called. In this case, the function is the show/hide function which Dreamweaver calls MM_showHideLayers.

Behvior changed from onfocus to onmouseover

Back in the Tag Inspector tab I selected the OnMouseOut event and then brought up the Show-Hide Elements popup and this time selected the Show button. Again, after the popup was closed the event had been changed to OnFocus so I had to change it in the Tag Inspector Behaviors panel to onMouseOut.

Behavior Code and Panel

See the example of Show-Hide behavior. Notice how the image flickers when you roll the mouse over it. If you used onfocus in place of onmouseover the image would not disappear. To solve the flicker problem follow these directions:

Flicker Problem

If you try to apply the Show-Hide behavior on the top layer it will flicker like crazy. To fix that do the following:

Here is the code:

<div id="topLayer" onmouseover="MM_showHideLayers('topLayer','','hide')">Message</div>
<div id="bottomLayer" onmouseout="MM_showHideLayers('topLayer','','show')"></div>

You may have to add an image to your bottom layer. It would be transparent of type .gif and the size would be the same as the layer.

Here is a link to an example using this code.


Popup Window Behavior

Popup windows are great for displaying small amounts of information without having to navigate away from the current window. They are used for ads, help, and mailer forms. To create a popup window it will need a URL to an html file that provides the content. Once that has been created the tag, the event, and Open Browser Window behavior are selected.

In my example I created some text that, when clicked, brings up the browser window. Since I just wanted a portion of my text to bring up the window when clicked on I had to add a <span> tag around the text. Before adding the behavior I selected the span tag by clicking on it. Then, in the Tag Inspector, I selected the onClick event and then chose the Open Browser Window behavior. When this was done I noticed that the onClick event was changed to onMouseOver so I had to go back into the code and change it from onmouseover to onclick, like we did in the example above with onfocus. 

<p id=txt1>
  Click to 
  <span id="bw" onclick="MM_openBrWindow('FloatClear.html','NoSmoking','width=500,height=400')">
      Open Browser Window
  </span>.
</p>

Now, when the mouse is moved over any part of the 'Open Browser Window' text and then clicked the window will come up.

Popup Window

This is the popup window that is shown when the event is triggered. It is minimal without any menubars and scrollbars.

Popup in Browser Window

 

Examples


References and Resources

* click the link below to continue with this lesson *
Spry Behaviors

Up Arrow Top

Copyright © 2010 - 2011 Robert D. Cormia - December 14, 2010