The example shown was created in Fireworks MX 2004 and the result may differ with other versions of Fireworks.

To begin this tutorial, we need to create 2 images of the same size that we want to use the rollover effect on. I have used the DIC logo as well as a rendered version for tutorial purposes only.



To begin, we first open Fireworks and set the size to 47 by 47 pixels (This is for the logo. You may change it for other images). We then import the logo and Fireworks has already established that as a frame. The default name is Frame1.

If the frames box is not open, click the windows menu and click frames.

Now, to create the second frame, we click on the small button which looks like a list box (top right of image). Select add frames; select the place at the end option button and this default name is Frame2. The second image is the blue version of the DIC logo. We paste it on the second frame making sure it is in line.



Then we insert slices on each of the images by going to Insert then Slice. Click on the slice and go to Window and then select Behaviours. Now click on the '+' button and choose Simple Rollover. Close the small box then now we are done.



The last thing to do is to export it. Go to File then Export. Save it as a .htm file with the options Save As Html and Images, Slices as Export Slices and the rest as default. (image)


Finally, preview it in a web browser, mouse over the image and it should change into the second image.

Thank you.