Add JavaScript to Fireworks

"Can you give it a little more... I don’t know... pizazz?" Heard this before? How often does a client walk in, see a Website composition, and though they like what they see, they feel that it needs a little more? And how often have you heard the question "Can you make it interactive?"

Of course, by their nature, Websites are interactive. But the golden nugget that clients look for is something that shows that their Website - and therefore, their comany - leverages the latest technologies. The trick is to provide your customers with a little pizazz and guarantee that, whatever the Web browser, your tricks will work.

Macromedia Fireworks comes armed with a full arsenal of tools that allows for rich interaction, and lets you take clients beyond the design. First, you just have to learn a few rules of engagement, and then it's off to battle with a killer design and fully interactive site.

Rules of Engagement

The most common method used to add interactivity to a Website is to employ JavaScript. JavaScript is a programming language supported by the main Web browsers that allows events - such as image swapping, a status bar message or a pop-up menu - to occur. And Fireworks lets you avoid learning Javascript. Fireworks contains a set of useful JavaScript commands in the Behaviors Inspector, as shown in figure 1. Behaviors are pre-programmed pieces of JavaScript code that can be easily modified. If you've used Dreamweaver, you'll recognize the Behavior Inspector - and it works and behaves the same way in both programs. Indeed, any Behavior added in Fireworks can be modified in Dreamweaver, with the exception of the Popup Menu behavior.


Figure 1. The Behavior Inspector

The Behavior Inspector quickly adds the correct JavaScript to an image. And only one rule applies: a Behavior can only be added to a hotspot or slice on an image. A hotspot or slice can be created using the Hotspot tool or Slice tool, as shown in figure 2. Select the tool and draw on the image you have created in Fireworks. The text in figure 2 is traced with the Hotspot tool.

Figure 2. The Hotspot Tool

The Hotspot tool is used to draw a region around the graphic, so that a behavior can be applied to this new region.

The Slice tool allows you to cut up a section of a graphic. When you export the graphic, it'll be exported as a Web page with a collection of images. If you select the Web page and open it inside a Web browser, it will appear as a whole image. Actually, the page is a HTML Table with several images arranged together. The slicing tool can be seen in figure 3.


Figure 3. The Slice Tool

The Slice tool provides a richer selection of JavaScript interactions, and has an advantage over the Hotspot tool in that it allows images to be swapped. More on this trick later.