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

We will create a simple swap image tutorial example swaping a shape with different colors. To start off, we need to create our design. I have made 3 rectangular buttons left of a large rectangle which will become the swap image. The design will be simple like the below image.


Save the image as a .png and name it appropriately. Now we go over to the right, and focus on the Frames and History window. In the frames window, click on the small button at the top right which looks like a list and click duplicate frames.


In the opened window, just click ok and repeat the process again. Now you will have three Frames. Click on the second frame and you will see a blank page. Go to File, Import and find the image that you have used for the first frame. Repeat this for the third frame.


After we have created our design, we will need to create slices. Slices are used to link images, swap images, create the status bar message and other simple yet effective actions. To insert a slice, we right click the first button and click Insert Slice.


By default, a green shape of the same shape will now appear over the selected image. Do this for the other two images as well as the larger rectangle. However, the other two frames will not need to be altered. Refer to diagram.


Now we need to link the buttons to the main image viewer, the larger rectangle. What we do is simply select the slice and a small circle will appear in the center of the button slice. Click and hold and drag your mouse to the larger rectangle. A faint line will appear, like the below image, and that is to show a connection. Right after dragging, a message box will appear. It will ask to link the button to which frame. Select the frame corresponding to the button and click the More Options and in that, uncheck the Restore image on mouse out. Repeat for the other two frames.


To test it out, press F12 and it will open in a web browser.
Thanks.