Add JavaScript to Fireworks

The First Behavior

The first behavior is going to be a simple Status Bar message. In active mode, the Status Bar behavior will place a message in the status bar of your Web browser when a user moves their cursor over a section of the graphic.

Take, for example, the hypothetical GarageSale.com Website. The title of the site is GarageSale.com, and we'll attach the Status Bar behavior to the site's logo. If we right click on the Garagesale.com logo, we're presented with a quick set of menu options. Click on "insert HotSpot". A blue outline appears around the title to indicate that a Hotspot has been associated with the graphic. Next, open the Behaviors Inspector, as shown in figure 4.

Figure 4. The Behaviours Inspector

The Behaviors Inspector has five main behaviors. Here the "Set Text of Status Bar" is being selected.

From the Behaviors Inspector, select the "+" symbol and choose "Set Text of Status Bar". A pop-up window will ask you to add a one line phrase - let's enter "Got Junk? Come sell it here!", as shown in figure 5.

Figure 5. The Set Text of Status Bar behavior is a commonly used JavaScript.

Select "OK" to close the window. The Behavior Inspector now lists the "Set Text of Status Bar". The action will only show on the Behaviors Inspector when the Hotspot that surrounds the title is selected. This allows you to group Behaviors together. The Behaviors Inspector is divided into two sections, Events and Actions, as you can see in figure 6.


Figure 6. The Events and Actions allow you to customize the effect beyond "canned" scripts.

The Action defines what will happen. In this case, the Action is "Set Text of Status Bar". The Event is what will cause the action to happen. The default for most Behaviors is "onMouseOver", that is, when the cursor moves over the appropriate section of the graphic, the action will be activated. The other Events include:

• onMouseOut
• onClick
• onLoad

The Event "onMouseOut" will cause the action to occur as the cursor is leaving the image. For instance, the appearance of a rollover button will change as the mouse moves in and out of the space of the button graphic. "onClick" will only trigger the action when a user clicks on the graphic. Finally, the "onLoad" Event executes as the user's browser loads the Web page.

All these actions use JavaScript to produce the effect in the Web page. You can rest assured that the scripts will work in Netscape’s Navigator 3 and Microsoft’s Internet Explorer 3 and up (the Set Text of Status Bar Behavior will work in Netscape 2.02+).

The next step is to preview your work in a Web browser - open your browser and load up the page. Figure 7 shows how the status bar for the browser will change as you move the cursor over the title of the page.


Figure 7. The Web browser’s status bar now reads "Got Junk? Come sell it here!"