If you remember using Adobe ImageReady before Adobe Systems folded some of its features into Adobe Photoshop, you'll recognize the functionality built into Adobe Fireworks. The versatile image editor focuses on Web graphics from creation through optimization, accommodating both vector- and pixel-based material. Along with editing image content, Adobe Fireworks helps you add interactivity to your work. When you've completed a project in Fireworks, you can save your visuals along with the code that supports their appearance and behavior.
Rollovers
- JavaScript-based rollovers add an enduring form of interactivity to any material you can view in a Web browser. These combinations of images and interactive behaviors enable you to make a Web page change the content it displays as soon as a user's pointing device lands on the hotspot that triggers the change. Some rollovers alter the image immediately beneath the user's cursor. Others replace a graphic elsewhere on the page. In some cases, rollovers revert to the original image after the cursor moves away.
How It Works
- JavaScript defines a series of coded behaviors, each named for the user action that instigates them. "onMouseOver" refers to a scripted behavior that occurs only if the user's cursor enters a specified place on the page. Conversely, "onMouseOut" reverses the process and defines an action that occurs when the user moves the cursor off the hotspot. The images themselves merely occupy the hotspots, leaving the work to the JavaScript functions.
Types of Rollovers
- Adobe Fireworks can create simple image swaps that replace one graphic with another. Beyond those basics, you can use Fireworks to build a navigation system that uses rollovers to display multi-state buttons or nav bar elements that add advanced interactivity. The disjoint rollover, sometimes called a secondary rollover, replaces one object when the user interacts with another. This rollover style makes it easy to display topic-specific graphics or sample images when the user rolls over a title in a list of topics.
Creating Rollovers
- Rollovers rely on slices, or defined polygonal areas within an image, to create the hotspots that trigger interactivity. Once you add a slice to an image and create a state in Fireworks' States panel, you can place or paste a second image to become the swap-in replacement. Each state in the States panel represents a rollover state in your final output. For disjoint rollovers, Fireworks slices include behavior handles that you drag from your original image to your target slice.
