Knowledge Quest: Behaviors

 

Behaviors are a quick and dirty way to insert JavaScript functionality into your web page without having to learn JavaScript. It's fantastic for web designers who like to make things look pretty but don't necessarily like to learn scripting languages.

The most popular behaviors according to Adobe are:

• Swap Image – Swap Image is similar to creating a Rollover Image we had learned in week four in our Dreamweaver course. What's different about Swap Images is that the image that gets replaced is not the image directly under the mouse. Instead, it is an image elsewhere on the page.
• Jump Menu – Jump Menus were covered in week eight in the Dreamweaver course. Again, this item will not be covered in this knowledge quest.
• Set Text of Status Bar – This functionality allows the browser status bar to display text upon mouse rollover of a web element.
• Open Browser Window – The Open Browser Window allows you to open a new browser window and specify the brower’s size, attributes and name.
• Show-Hide Elements – This allows you to hide and/or show elements on a page, provided that all the individual elements are in div containers.

This report focuses on these four most popular behaviors.

 

Swap Image (Remote Rollovers)

Swap Images allow you to create remote rollovers on a page. You hover your mouse over item A and item B elsewhere on the page changes.

Procedure to create Swap Images:

• Name all the images that will be affected. In my case, I named the thumbnails "a," "b," "c," "d," "e" and the large image was named "large"
• Go to the Behaviors panel (if this is not visible, click Window > Behaviors or click Shift + F4) click on the “+” symbol, choose Swap Image
  
  
  
  
  
• You get a dialog box that lists the name of all the images on your page. Choose the image that you want to have the image swapped. In my case, it is the image labeled "large." Then browse to the image you want the image to be swapped to.
  
  
  
  You can then choose if you want the images preloaded (Preload images). I recommend that you keep this checked. If it's checked, the images will load when the page loads. If it is not checked, the image doesn't load until you the remote rollover is triggered.
  The Restore images onMouseOut option allows to default back to the original image. In my case, I don't want to default back to the original image. Instead, I want to show the last thumbnail enlargement shown. Whether or not you check this option depends on what you want to do with your page and dependds on your personal preferance.
  
• Click OK

Pros: This functionality was pretty easy to set up and works well in Firefox and IE.

Cons: Might be confusing the first couple of times. Is very straightforward after you get it right the first time.

 

Set Text of Status Bar

If you’re looking to display explanatory text upon rollover of web elements on a page (text, links, images) you can utilize this feature.

Procedure to create status bar text:

• Highlight the link/text/image where you want the status bar text to show up.
• Go to the Behaviors panel (if this is not visible, click Window > Behaviors or click Shift + F4) click on the “+” symbol, choose Set Text > Set Text of Status Bar
  
  
  
  
  
• Type in the desired text in the Message text field
  
  
  
  
• Hit OK

Pros: Can use this relatively simple method to inform the viewer of additional information.

Cons: Does not work in all browsers. Internet Explorer works best, but even then, it doesn't always work. For example, the link text does not work and the status bar does not default to the link location. This function does not work at in Firefox.

 

Open Browser Window

The Open Browser Window allows you to open a new browser window and specify the brower’s size, attributes and name.

Procedure to Open Browser Window:

• Highlight the link on your page
• Go to the Behaviors panel (if this is not visible, click Window > Behaviors or click Shift + F4) click on the “+” symbol, choose Open Browser Window
  
• Browse to the page/URL you would like to display
  Enter in Window width and height in pixels. You don't need to enter "px" after the number.
  
  
  Check the Attributes you would like included in your popup window.
• Click OK

Pros: This allows us to get around the XHTML Strict rules where target="_blank" doesn't work.

Cons: Popup windows have a bad reputation.

 

Show-Hide Elements

The Show-Hide Elements functionality allows you to hide and/or show elements on a page, provided that all the individual elements are in div containers.

Here are Show-Hide Elements Examples

Procedure to Show/Hide Elements

• Create a div tag id for every element on the page that will be hidden/shown
• Highlight the image/text that will function as the show/hide button
• Click on the "+" symbol in the Behaviors panel, select Show-Hide Elements
• A dialog box comes up. Highlight the div elements you want to show and click "Show." Highlight the div elements you want to hide and click "Hide."
  
  
  
  
• Click OK
• The default event seems to be onFocus. If you're looking to activate the script when the mouse hovers over an element, choose onMouseOver. If you want the script to become activated after the mouse is clicked, choose onClick.
  
  
  
  

Pros: easy way to make tabbed interfaces without DHTML or AJAX

Cons: confusing to set up, need to know a little bit of CSS. Also, mouse does not automatically change into a pointer when it rolls over the image/text with a script.

 

Other Built-in Behaviors

The following are the 27 pre-installed Dreamweaver Behaviors:

• Call JavaScript - This behavior will assign a customized script to your event
• Change Property - Changes an object's properties (background color, size of an image, etc)
• Check Browser - Redirect a user to specific Web pages based on the browser version (deprecated)
• Check Plugin - Verify that specific plugins are installed in browser
• Control Shockwave or Flash - Make Shockwave or Flash movies play, stop, or rewind
• Drag Layer - Sets layers to draggable
• Go to URL - Sets a URL for the browser to open
• Hide Pop-up Menu - Hides a pop-up menu created by Dreamweaver
• Jump Menu - Creates a jump menu
• Jump Menu Go - Adds a go button to the jump menu
• Open Browser Window - Open a new browser window
• Play Sound - Play a sound file (deprecated)
• Popup Message - Displays a JavaScript alert box
• Preload Images - Preloads images for scripts (as in swap image)
• Set Nav Bar Image - Changes the image in a navigation bar
• Set Text of Frame - Puts text / HTML into a frame
• Set Text of Layer - Puts text / HTML into a layer
• Set Text of Status Bar - Puts text into the browser status bar
• Set Text of Text Field - Puts text into a form text field
• Show Pop-up Menu - Displays a Dreamweaver pop-up menu
• Show-Hide Layers - Shows / hides a layer with the visibility property
• Swap Image - Swap one image for another, such as a rollover image
• Swap Image Restore - Restores the previous image swap
• Go to Timeline Frame - Goes to a specific frame in a timeline
• Play Timeline - Plays a timeline
• Stop Timeline - Stops a timeline
• Validate Form - Checks the data submitted in a form

Pros: easy to use, don't need to know JavaScript

Overall behavior cons: older browsers may not have as many available behaviors. Different browsers will display behaviors differently. While JavaScript is reasonably secure, it is not 100% fail-proof so browsers such as IE might block the script(s).

Behaviors are Extendable

If the above behaviors are not enough, you can add in others. To get them, click on the "+" symbol in the Behaviors panel and select Get More Behaviors... This will bring you to the Acrobat Dreamweaver site where you can read about and download more behaviors. You simply download the files and then follow the installation directions.

Questions

Is this a tool or technique you think you will use in your web development?
Behaviors are easier to use than learning JavaScript. While I am learning JavaScript anyway, I probably will resort to using behaviors because they are so simple to use.

How does it fit into Dreamweaver or web development, or both?
JavaScript is a huge component of web development, as it’s what makes a page interactive. Simplifying the JavaScript so that a non-coder can easily utilize the power of JavaScript is very beneficial to many web designers.

What did you find most challenging / interesting / frustrating about this experience?
I think the most challenging part of the knowledge quest was coming up with a topic. It was one of those “you don’t know what you don’t know until you know you don’t know” scenarios. Once I understood what a behavior was, it was easier to research it.