home
Intro to Behaviors


Behaviors are java scripts, accessible through the Behaviors panel

Behaviors add Java Scripts to your page, which define events you couldn't define with simple HTML. The basic behaviors available in Dreamweaver are those commonly used to enhance navigation and interactivity in a website. The script for a behavior is located in the head of a document and referred to in the body.

Behaviors are a combination of an Event and an Action.
Use the Behaviors panel to attach behaviors to page elements and to modify parameters of previously attached behaviors.

Attaching Behaviors

Open the Behaviors panel: Window/Behaviors Note: The tag that's currently selected in the Document window appears in the title bar of the Behaviors panel. If no behaviors appear in the behavior list, then no behaviors have been attached to the currently selected element.

The Behaviors panel has the following options:

Add (+) is a drop-down menu of Behaviors which can be attached to selected elements or tags. When you choose an action from this list, a dialog box appears in which you can specify parameters for the behavior. If all of the actions are dimmed, then there are no events that can be attached to the selected element.

Delete (-) removes the selected event and action from the behavior list.

Up and down arrow buttons move the selected action up or down in the behavior list for a particular event.

After a Behavior is applied you will see displayed in the Behaviors panel. A drop-down manu names the Events that can trigger the action. This menu is visible only when an event in the behavior list is selected. Different events appear depending on the object selected.

The Behavior itself, which can be modified by double clicking.

 

How to attach a Behavior

1

Select an element on the page, such as an image or a link.

 

To attach a behavior to the entire page, click the <body> tag in the tag selector at the bottom left of the Document window.

2

Choose Window / Behaviors to open the Behaviors panel.

 

The HTML tag of the selected object appears in the title bar of the Behavior panel.

3

Click the Plus (+) button and choose an action from the drop-down menu.

 

 

Actions that are dimmed in the menu can't be chosen. They may be dimmed because a required object doesn't exist in the current document.

4

Enter parameters for the behavior, and click OK.

 


Examples:

Open New Browser Window

Opening a new window with a specified width and height is the goal of this script.
It is often used to present works of visual art or to provide a larger view of a thumbnail.
You need to html pages before you apply the behavior:
1. A page that contains a link.
2. A page that will be displayed in a smaller window once you click the link.

    Select text or image and insert a "#" into the link text box in the Properties
    inspector. This is called a "blind Link" meaning a link that points to the page itself.

    1. The text or image still selected open the Behaviors Panel under Windows/Behaviors

    2. In the Behaviors panel click "+" and choose the "Open New Browser Window" Behavior.

    3. Browse to the html file that you want to display in the window.

    4. Enter the a width and a height for the window.

    5. Check boxes of attributes that you want to apply to the window, like scroll bars or other     menu bars. The simplest cleanest window is one without any attributes. Click "Okay".

    You see a short description of the behavior added in the Behaviors panel.
    The first part shows the event meaning what the user needs to do. You can change
    the event when you click on the text string. Usually "on click" is used in this case.


this image is linked as described above
and when you click on it it will open a window
displaying a larger version of the same image
s

... check it out

Note: By double clicking on the action in the behaviors palette the same window will re-open and you can make adjustments

 

Swap image

"Swapping" means to replace one image with another image while rolling over a third image. Swap image can be used to create a rollover, simply by "swapping" the image itself. This Behavior can also be used to roll over one image and swap one or more images in other locations within the page. This behavior is helpful in presenting several images that are displayed within a page by rolling over or clicking on thumbnails and showing a larger version in another location as shown below. View the following example:

 

 

f

When rolling over this thumbnail a larger version of the image appears on the right and replaces the current image

 

NOTE: If you have Photoshop, re-size your images to thumbnails (recommended: 100px x 100px) and larger versions, all of the same size. See example above. Also create a 1x1px transparent gif to hold the space in the stage area or an image of the size of the larger versions. (View the example above). The transparent gif can be sized later in the Properties in Dreamweaver to whatever size you need.

 

1. Build your page layout using CSS creating a stage area and navigation area for the thumbnails.

3. Insert your image thumbnails into the navigation area.

4. Insert a transparent gif or other image of the correct size into the stage area.
Note: all other images loaded into this area will have the size of the initial image.

5. Select each thumbnail and stage image and name them in the Properties Inspector under ID. This name is the target name for the Java script..

6. Select the first thumbnail and open the Behaviors palette (Window/Behaviors)

7. Choose the swap image behavior from the drop-down menu

8. In the window that opens select the target name of the stage image. This is the image you want to replace when rolling over the thumbnail.

9. Browse to the image that you want to replace the initial stage image with. The replacement image should be the larger version of the thumbnail image.

10. click okay.

11. Check your Mouse Event, the first string of code that is now added to the behaviors panel once you select the thumbnail.

12. Test in browser.

 

The result of this Script will be that rolling over the thumbnail image replaces the initial stage image

with a a larger version of the thumbnail image.

 

The result of this action script would be that rolling over the thumbnail image the black image

will be replaced by a third image.

Check plugins

If you decided to use swf or sound files in your project you can enter a script that checks if the user has the plugin needed to view the site.

Select the <body> tag in the low left corner of the document window

Open the behaviors palette

Choose check plugin

In the dialog box choose which plugin to check

You can send the user to the adobe website to download the plugin

You can create an alternative site that doesn't need the plugin