Fireworks allow you to create swap images. Swap images are entertaining, easy to design and gives an attractive look to a site. It is easy to design web sites using swap images in Fireworks.

Following are the step by step instructions on how to design web sites using swap images.

1. Create the layers like structure, links, rollovers and swap. Each layer has got its on importance. The common elements for the page are put in structure layer. The links are placed in the links layer. Rollovers are the duplicate copy of the links layer with the button and text color changed for the rollover effect. Swap layer is used to place swap image.

2. Go to the Frames window select the first frame and drag the mouse to 'Duplicate Frame ' at the bottom of the panel.

3. Select the swap layer and delete the image and paste in the second image. Position it in the same place as the previous image by giving the same x and y position of the first image

 
Image 1(a)                                             Image 1(b)

4. Create frames as the same number of swap images. Only one swap images will be available in each frame. If you also need rollovers along with swap then that layer is open in Frame 2.

5. To give the rollover effect, select the first frame and go to layers panel, close the eye for 'rollover' layer and the links layer should have the eye open. Use the same procedure for different rollovers..

6. Next is to slicing up the image and name it appropriately for easy reference

ges

7. Right click on the rollover slice and from the popup menu select 'Add Simple Rollover Behavior'. Repeat this step for the each rollovers buttons.

8. Next is to link the swap images. Select the first rollover slice, click on it, then go to Insert> Behavior. Next click on the '+' button and click on Simple Rollover. When the Swap Image window opens select the frame which has the image you want to link to and click on OK. Repeat these steps for each rollover.

Image 3(c)

9. Preview the file layers after removing the eye in the web layer and preview the file

Image 4(a)

10. Finally export the entire file. You don't need to do any programming. Fireworks will automatically convert the swaps to javascript and html when you export the file. You need only to focus on designs. When you export the file see that you give the following settings.  In file name give swaps, save as html and images, under html tab choose “export html file”, and under slice choose “use slices’

Browse the .htm file from Internet explorer and you'll see your swap images working beautifully.