Behaviors

Dreamweaver’s behavior tools let you apply common JavaScript actions without having to write any JavaScript. You can make something happen on a page when your users load a page, click on an object, or move the mouse around (Towers, 1999, p. 29). To open the Behaviors palette go to Window>Behaviors.

Behaviors provide a wealth of JavaScript features that are perfect functional compliments and necessities to your Web portfolio. For example, Pop Up Windows (Open Browser Window) are excellent for presenting your content in an defined window that isolates the work and allows the user to concentrate on the work and not on the other elements located on the Web page.

Rollovers (Swap Image) are also important elements in Web page design. Rollovers in a Web page refer to the execution of a change of graphic or text color when “rolling over” a Web page hot (active) link. The behaviors palette in Dreamweaver MX 2004 allows you to add several behaviors to the Web page’s text and graphic elements. Rollovers (Swap Image) Rollovers provide feedback to the user when they mouse over an image by replacing the image with a “lit up” image or another image entirely (Towers, 1999). There are several ways to create rollovers in Dreamweaver. One way is to use the Swap Image Behavior. Another is to use Insert>Image Objects>Rollover Image.

Either way is effective, so we will describe both techniques. You can choose the one that you are most comfortable using. The Insert Object technique seems to be a bit simpler. Both techniques accomplish the same thing, setting up a rollover image on an HTML page. The simplest or two state rollovers require you to create two graphics. One is the graphic that will be “rolled over”. This is usually a navigation button or a graphic that triggers the appearance of other graphics.

The second graphic is the replacement image that shows when the mouse over occurs. In the case of a navigation bar, the second graphic usually has visual contrast to the first graphic. Graying out or adding borders around the replacement graphic are typical techniques. Multiple state rollovers can also be created.

You can assign a different image for each occurrence of mover over and mouse down. In this case you would need three graphics. One for the button also known as the mouse out state (the mouse is not on the graphic), or the beginning state.

The second graphic is for the mouse over state, and the third graphic is for the mouse down state. To create rollover graphics you can use the PNG file you created in Macromedia Fireworks, hide your slices in the layers palette and alter the existing buttons you created. Maybe change the text color or add a color border around the shape. You can also lower the opacity of an image to show a rollover effect. Try one of the mentioned changes to the graphic.

Don’t worry about style and visual impact, just try it. You will be making many buttons and many rollovers as your Web portfolio design evolves. Then, show your slices again and then right click (CTRL+click) on the image to Export Selected Slice. The name will be same as the slice you exported. Add the suffix _roll before the .jpg or .gif file extension. This will allow you to see the rollover image quickly when you are creating the rollovers in Dreamweaver.

Save the files to your firstinitiallastname/images folder. (Use your root directory, images folder.) Keep in mind that if you use the existing table that you exported from Fireworks in Lesson Six, you must keep the images the same size; otherwise the table will scale the graphic to fit the space.

The result is less that eloquent and should not be a part of your Web portfolio design. The rule here is that if you create rollovers in a table, both images must be the same size. You can create rollovers that affect different images other than the source image. This means that one image can trigger the change of another. This effect is great for menu previews of your work.

The user rolls over the menu item RESUME, and below in a blank or populated area swaps in a thumbnail image of your resume. Export selected slice in Macromedia Fireworks (A slice can be individually exported to create a second “state” for the rollover. The exported slice will act as the graphic triggered by the rollover.)

Creating Rollovers with the Swap Image Behavior

Before we begin making the rollovers, we should name the images that are going to be used so that we have easy references to images in the behaviors swap image dialog box. The names should be descriptive and simple. That is the reason we name the images. Dreamweaver will use predefined names if we do not attach a name.

Assigning a name to an image is performed in the Properties Inspector. Click on each image and name it in the naming field located to the upper left of the Properties Inspector. If the button is the bio button, use the name bio. Keep it short and clear. Next, we add the Swap Image Behavior.

1.Click on the + in the Behaviors palette and choose Swap Image. The Swap Image dialog box will open and you will be prompted to choose an Image and Set source to.

2.In the Images section, click and find the name of the image you want to swap from. The image you select is usually selected by default so you do not have to touch this if you are doing a single state (two images) button.

3.In the Set source to, browse to the graphic that you exported from Fireworks. It should have a _roll suffix before the filename. After setting the images, Click OK.

4.In the Behaviors palette, set the event to onClick or onMouseOver. 5. F12 to Preview in the Browser. Test the Rollover.

Here is another way to create a Rollover in Dreamweaver.

• In the menu go to Insert>Image Objects>Rollover Image.
• Choose the original image
• Choose the rollover image
• Add a link destination.

This method should be used when you are creating a Rollover without an existing image on the page. If you are starting from scratch and have no images on the page, use this method. If you have existing images on the page and have the rollover images waiting in your images folder, then you should use the Swap Image Behavior in the Behaviors palette. Naming graphics for rollovers (A name can be applied to a graphic in the properties inspector to identify it easily inside of the swap image behavior dialog box. This is especially helpful when creating multiple state rollovers.)

Swap image behavior dialog boxes (Notice how the file we named with the _roll sticks out among the other file names. Using techniques like using naming strategies can help you with design and production.) for doing multi state rollovers. In that case, you would perform the process inside the Swap image dialog box. You must pick a source image twice and then set the behaviors panel event to onMouseDown and onMouseOver.