Buttons are a very popular way to present menu items or links, and they are best done with layers. The button itself may be one layer, and the text another. Keeping the text on a separate layer allows the button graphic to be reused; simply change the text layer for a new, graphically consistent, button or set of buttons.
Before we cover buttons, however, we need to look at creating image swaps, or rollover effects. A rollover changes the image when the user moves the mouse over or away from the image. It is called a dynamic effect since it responds dynamically to user input. The simplest swap effect is the rollover.
To create a simple rollover, you need two images: the image to be displayed first, and the one to be swapped in dynamically. To look right, both images must be the same size, since most browsers will constrain the second (swapped in) image to the size of the original image.
Let's create a simple text rollover using Fireworks®
| First, create a new image. Make it small, with a transparent background. |  |
 |
|
|
Using the text tool (covered in the section on Image Generation), create your text. Choose a color and a font. You'll be changing the color for the rollover effect.
Export the image into a format which supports transparency (.gif or .png) |
 |
|
Change the fill color and save with a new file name. (I used "test1.png" and "test2.png")
|
 |
Now open your web editor (Dreamweaver®, FrontPage®, or any html editor which supports javascript).
There are several ways to create rollovers in the more sophisticated web editors; many will even do it for you via a series of prompts. This tutorial will show you how to make your own rollovers. You can then use your editor's built-in functions if you want; the steps will be clearer, however, once you understand how the rollover works.
| Insert an image into your html document. Name it so you can locate it later |  |
|
| Open the "Behaviors" palette ("Window-->Behaviors") |  |
|
| While the Image is selected, add a "Swap Image" command to the image. Set the parameters to "On Mouse Over." |  |
|
|
Choose the second image you created in the "set source to" box (here, it is test2.png). You are creating a javascript which tells the browser to change the original image (test1) to a new source (test2) when the user performs a specific action (Mouse Over). In Dreamweaver ®, you can choose to Restore the original image on Mouse Out (that is, when the user moves the mouse away from the image). Doing so creates another javascript command (On Mouse Out). |
|
|
| The javascript commands can be edited by clicking on the triangle. For this example, we've left them as MouseOut=Restore and MouseOver=Swap |  |
|
| Here's the result |  |
|
Buttons
Many Web editors also allow you to create buttons from within the editor. Dreamweaver® versions 4 and higher, for example, allow you to create "Flash Buttons" without having to use Flash®. But Flash® files (.swf) are beyond the scope of this tutorial. But you can make buttons using image rollover effects using the steps explained above.
