Lesson 8 Behaviors

Fireworks allows you, the designer, to add interactive elements to objects using behavior commands.

Rollovers

Rollovers create a clickable region with clues depending on the position or action of of the mouse.

Let's go over step by step how to create a simple rollover effect.

• First create an image.
• Then duplicate Frame one to create Frame Two

• Add the effect you wish to show on the rollover state.

• Click back to frame one, and using the Slice Tool, draw a rectangle around the image, making sure that you leave enough room for the glow that will show in Frame Two.
• In the Object Window you can add a URL if you wish, or you can leave this blank.
• In the Behaviors Window click the and select .
• Export as usual.

• This is what our Star looks like.

• When you look at your list of files you will see an HTML file associated with the image. There are two parts of this HTML code.
• First there is the Javascript that creates the Rollover effect. This needs to be copied in the HEAD tag of the HTML code of the document where you want the image.

• Next, you have the HTML code for the Sliced Image. That needs to be copied in the location where you want to place your image.