Using Fireworks to create and export rollover images for Dreamweaver

A mouseover image (AKA rollover image) is one that changes one or more of its properties when a user moves the mouse cursor over the image on a page. There are many ways to accomplish changes like this, including the use of CSS with HTML, but a tried and true method is to create a mouseover is by using the Adobe application Fireworks to first create an initial image, and then to create an alternate state of that image, one that exhibits modified properties.

The first step is to create your original image in Fireworks. Mouseovers are typically used as buttons, so we can create a simple round button that will change when it is moused over.

Click FILE > NEW and then choose 100px by 100px as the size for your canvas. For ease of design, I suggest your canvas color be set to white.

Next, draw a circle to fill the canvas as completely as you can. Don’t go outside the boundaries but also don’t worry if you aren’t getting it all…we can trim the canvas to fit later. To draw a circle, select the ellipse tool from the vector group in your tools pane. Your tools pane probably shows the rectangle tool, but if you click and hold the triangle at the bottom right of the rectangle tool you’ll get a menu of tool choices. Mouse down to the ellipse tool. To draw a perfect circle, hold down the shift key as you click and drag across the canvas from the top right corner down to the bottom left corner.

You can set the fill and outline (referred to as the stroke) in the symbol properties pane at the bottom of the screen. Fill color is indicated by the paintbucket icon and stroke color is indicated by the pencil icon. You can change other properties related to these as well, such as the stroke width. Fill your circle with a bright yellow.

Now, draw another ellipse, much smaller than the first one, inside. Yes, we’re drawing a face, and this will serve as the one of the eyes. After this, right click on the eye, and select EDIT > COPY. Now right click and select EDIT > PASTE. Choose your pointer tool (top left tool in your select group of your tools pane) and drag the eye…you’ll see the copy was right on top of the original and now is moving off as your drag it. Use the pointer tool to position your two eyes.

Now, let’s make him happy. Click on the brush tool in your bitmap group (right above the vector group) and use it to draw a big smile, making this a happy face. You can use the pointer tool to reposition any of the pieces inside the original large circle so it looks good. This happy face is our original button image.

Now, we need to make an alternate image that will show when we mouseover the button. First, we need to create a new state. This is the new "state of being" the button will take on when the mouse is hovering over it.

To create our new state, open the states window and select it. To open the States window, click on your Window menu and then select States. If it has a checkmark, it’s already open…check your desktop to find it. Once you have the States tab selected, click the little triangle next to three horizontal lines at the far right of the titlebar (the same bar where the States tab is located). This will open a context menu…from here you want to select duplicate state. When the duplicate state dialog box opens, make sure that the after current state radio button is selected and then press OK.

The next step is to add a slice to our image. Make sure that state 2 is selected (look in the states tab…state 2 should be colored blue) and choose your pointer tool and then select all the items in your image. Hold down the shift key and click on the eyes, smile, and large circle one at a time until they are all selected.

Next, click the Insert menu and choose Edit. From the edit menu select Rectangular Slice. You should see a green layer appear over your entire image. Now, right-click on the center marker in your slice and from the context menu that opens select Add Simple Rollover Behavior.

Now we want to create the alternate image to exist in this new state. Make sure that State 2 is still selected and then click on the layers menu. Click the eyeball to the far left of the Slice layer to hide it for the time being. Then click on Layer 1 to select it. This is the layer that has your actual content in it…the shapes you drew onto your canvas. Using your pointer tool, select just the mouth/smile. Once selected, go to the Modify menu and select Transform > Flip Vertical. Your smile should turn upside down and move up to the top of the canvas.

With your pointer tool still selected, you can drag the mouth, which is now a frown, down to where it should be on the face. You can also use the arrow keys to move its position down.

Now, click File > Save All. Click the preview button at the top of the stage (just below the menus) and try it out. It should work by switching back and forth as you mouse over the image. Congratulations!

To use your mouseover image in a Dreamweaver, you’ll need to export it. Click on the File menu and select Export.

In the dialog box that opens up be sure to select Images Only in the Export drop-down selector. Select the appropriate Assets or Images folder in your site root folder and save your export to that location.

The final step is to insert your images into your web page. Open the page in Dreamweaver and click in the position where you want to insert the mouseover. Now, click the Insert tab in the menu and choose Image Objects > Rollover Image.  Your image is inserted along with the appropriate scripting to make it function as a mouseover. Yea!