Rollover Buttons Are Just A Beginning

by Gary W. Priester

Images Swaps, like the example shown here, are those cool mouse over effects where an image and/or text appears or changes when the mouse moves over the button or trigger image. In this article, I'll show you how to create this effect in Macromedia Fireworks 3. The process is basically the same in Fireworks 2.
May 9, 2000

The first thing we will do is set up our page. Then we'll create a Simple Rollover effects button. Simple Rollover effects have an Up state and a Mouse Over state. Fireworks can also create a four-state Rollover Effect but we will save that for another day. We'll create a new Frame upon which to place our text. With all the elements created, we'll assign a Behavior to the button which will cause the text to show when the mouse passes over it. Ready? OK Here we go.

Creating a New Page

The first thing we need to do is set up a new page. Well, that's not exactly true, the first thing we need to do is open Fireworks, then we can select New from the File pull down menu. Set the Width to 400 Pixels and the Height to 100 Pixels. If you're creating web graphics, always use pixels for your measurements. Using another unit of measurement can create unsightly borders around your images. I've selected 96 dpi, Windows resolution. If you're creating images to be seen on the Macintosh, select 72 dpi. I've set the background to white. You can also select a web-safe color from the Custom drop down list or select Transparent which will make the background color invisible.

Creating a Simple Rollover Button

For openers, we'll create a Symbol. Symbols are reusable elements that can be either graphics or buttons. In this case we want to create a button symbol. From the Insert pull down menu, select New Symbol. Check the Button option and name the symbol Button A (or a name of your choice). Click OK.

The Symbol dialog will open. There are five tabbed sections, Up, Over, Down, Over While Down and Active Area. For now we are only concerned with Up and Over. The Up state is the appearance of the button or object when the mouse is not directly over it. The Over state is the appearance of the button when the mouse is directly over it. The Active Area determines the activation area (hot spot) for the button and by default selects the entire button, which is fine.

Select Rulers from the View pull down menu. Select the Ellipse Tool, hold down the Shift key and move the cross hair cursor to the upper left corner of the page (the white area). Drag a circle approximately 90 pixels in diameter. The ruler will be highlighted as you drag. The Shift key constrains the ellipse to a circle.

Select the Fill drop down at the bottom of the main toolbar. Select the first color on the left in the second row of colors. The Hexadecimal value for the color is 009999, which is a nice blue green color.

Select the Text Tool and click in the center of the circle. Set the font to Arial (or a similar font such as Helvetica or Frutiger) and make the Size 68 points. Key in a capital letter A. Click the color drop down and change the color to 99FFCC or click the small color wheel icon to open the Color dialog and change the RGB values to 153, 255 and 204.

Select the circle and the letter A, then select Align from the Modify pull down menu. Align the two objects vertically and horizontally. This will be the Up state for our button.

Select the Over tab. Press the button in the lower right, Copy Up Graphic Button. This copies the contents of the Up state window to the Over state window where we can modify them.

Change the color of the circle to 00FFCC or RGB 00, 255, 204. Double click on the capital A to open the Text dialog. Highlight the A with the text cursor and change the A to a capital B. Change the color to 009999 or RGB 00, 153, 153. Press OK. A warning dialog will appear asking Update the text in the other button states? Press No. Now we have the Up and Over states for our button.

Select the Active Area tab. Make sure the Select Active Area Automatically box is checked in the upper left side of the dialog. You'll see a transparent green square over the button. This represents the area, or hot spot as it is called, that will activate the button rollover effect.

Press the Link Wizard button in the lower right. From the Link Wizard dialog, select the Link tab. In this section, you can add an URL, image, or sound to link to, add an Alternative text tag, that appears when the cursor is over the image, and Status Bar text which displays along the status bar of the browser when the mouse is over the image. For now you can leave this empty, but make a mental note where it is.

Your image will now look like this. You might need to select the button and drag it to the left. If you want to see how the rollover effect works, in the Layers panel, click the eye icon next to the Web Layers layer to make the slices invisible. Select the Preview tab in the image dialog. Fireworks will generate an HTML preview and as you move the mouse over and off the button, the color should change and the A should change to B and back to A. Cool?

Adding the Swapped Image

From the Layers panel, select the Frame tab. Frames are like Layers but slightly different. Frames can contain hidden images, such as swap images. We'll create some text, add a Slice rectangle to contain it, and place it in its own Frame.

Select the Frames tab then press the small triangle button on the right side and from the flyout menu select Add Frames… Change the number of Frames to 1, check After Current Frame, and press OK. If you select frame 1 and then frame 2 you will notice the button switches from A to B.

Select Frame 2 by clicking the Frame 2 title area. Select the Layers tab, press the small triangle-shaped arrow and from the flyout menu select New Layer. Make sure the Share Across Layers box is not checked. Name the new layer Text and press OK.

Select the Text Tool and click in the page next to the A button to open the Text dialog. In 24 point, Arial (or a similar font), key in "Everything from A to B under one roof!" in two lines as shown. Make the text color FF6100% orange, or RGB 255, 102, 0. Press OK. Vertically align the text next to the button.

With the text selected, from the Insert pull down menu, select Slice. A transparent green rectangle will be added. This represents the slice. Click the slice, then in the Object Inspector, uncheck Auto-Name Frames, and key in Text. Make sure the Type: entry says Image and there should be no URL or Target selected. Naming sliced areas is not important in this exercise, but if you are working with a complex image map, you will definitely want to do this to distinguish between a variety of sliced images. If you do not name the slice, the slice name will be something like Untitled 1, r2, c2, which may make sense to a browser, but not to you or me.

Select the Layers tab and select the Button layer. From the Frames drop down list, select Frame 1. The text should disappear.

From the Behaviors tabbed section, make sure On Mouse Over - Simple Rollover is selected, and press the + to access the Behavior options. From the fly out menu, select Swap Image.

The Swap Image dialog will open. Because we only have one item to swap, we can click on the wide rectangle to select the text. Make sure the Frame No: text entry window shows 2 (the layer with the B button and the text). Press OK.

From the Layers tabbed section, deselect the eye icon for Web Layers (if it is not already deselected), and press the Preview tab to preview your image swap. If everything works, you're ready to Export your image swap.

Exporting Your Swapped Image

From the File pull down menu, select Export. When the Export dialog opens, make sure Use Slice Objects is selected. From the Style drop down list select Generic. If you plan to place your image map in Dreamweaver 2 or 3, or Front Page or GoLive, you can select one of these instead of Generic. Press Save. That's all there is to it. Fireworks now does the hard part and creates the HTML file and an HTML table in which the objects are reassembled when the page is displayed. You can see the HTML file and the various slice and shim GIF files (invisible images used for positioning) in the file contents window.

You can use the HTML page as created or copy and paste the HTML code into your web creation application. Be sure to pay attention to the instructional comments placed in the HTML file so you get the two parts in the right locations and so the JavaScript will play out correctly.

If it looks like there a lot of images in the file contents window, look at the image again with Web Layer made visible. Each of those rectangles is defined as a GIF file, even if there is nothing there. This is how Fireworks uses a table to position the buttons and text in the exact position in which we created them.

The important thing to remember when creating swapped images, and maybe it's just me, because I had a real hard time using Fireworks' Help menus and had to work this out for myself, is to place the swapped image on its own Layer and Frame. If you have five buttons and five swapped images, make sure you add layers and frames for each and get the items on the right frames and layers. Naming the slices is critical for more complex images.

Here's a final example. The lamb and seahorse images are letters from Adobe's Critter font, a delightful alphabet of stylish animal symbols.

Gary W. Priester is a reformed advertising art director having spent 25 years creating print and TV advertisements to get people to buy products and services they didn't need. For the past decade, Priester has been a principal in The Black Point Group, a Northern California graphic design firm. He is the author of Looking Good in Color, Ventana Press, and co-author of CorelDRAW Studio Techniques, Osborne/Corel Press. In addition, Gary writes for numerous magazines and Web sites. He lives just north of San Francisco with his artist wife, Mary Carter, their six chickens, five cats, four doves, two finches and one extraordinary canary.