Swap Images Effect

Swap Images Effect using Fireworks

Tool(s) Required:

Graphics Editor: Fireworks 4 or above
Recommended: Adobe Fireworks CS4

Introduction

Example 1: This example uses Swap Images, Rollover Buttons, Curves, Vector Shapes, Paste Inside, Drop Shadow. View/Buy complete site using this design: Template 7 - Food

Using Swap Images is one of the most interesting and attractive graphic idea in designing a web site. We rate it 10/10 among our web design ideas. Fireworks makes it so simple to create and use swaps for your web site. You must try it out!

What it does

Swap Images basically is a Fireworks Rollover Behavior where a group of web objects [web object - a slice, hotspot, or button] trigger the change in the display of (swaps) another graphic on rolling over them (onMouseOver event) and reverts back to the original image on rolling out of the web object (onMouseOut event). The on-rollover images are preloaded into the page when it is loading, this ensures that the swap images are displayed quickly.

How it works

The whole functionality is controlled by the JavaScript functions automatically generated by Fireworks. These functions are very optimized and you can always trust the code generated by tools :-) If you are a programmer-cum-designer it is good to know what the code does: There are 4 functions generated MM_preloadImages, MM_swapImage, MM_swapImgRestore and MM_findObj. Their names are self explanatory to what they do. These functions are the same for Rollover Buttons/Images too, only the place from where they are called is different.

Create your own attractive Swap Images

Create a new file in Fireworks and follow these steps:

• Step 1: It is always very important to do the swap images only after the site structure is completed. Just position the initial image to be displayed correctly and place it in a layer named "Swap". Close the layer "eye" to hide it in case it is interfering with your design. Just leave some space for it. Prepare your buttons or rollover buttons (slices should be present on each of them).
  
• Step 2: When you are ready to start on the swap images lock all other layers except "swap". Now import all your required images into this layer.
  
• Step 3: Decide if you want to have you images Pasted Inside a vector shape (check out our design tips on Vector Shapes) like in the displayed example or Feathered like in our Template 7 - Learning/Kids. Prepare all the swap images accordingly.
  Tip: Duplicate the shape by pressing Alt+Drag.
  Tip: Use Drop Shadow to make the swap stand out.
  
• Step 4: Open the Frames panel, you will see just one frame called "Frame1". Duplicate the frame as many times as needed (calculated one frame per swap).
  
• Step 5: Place the first swap image in the first frame, second in the second frame and so on. This means that in the "swap" layer for each frame only the corresponding image should appear. To decide the order of the images just relate the order of the rollover buttons with the swap image frames.
  
• Step 6: Draw/Insert a single slice and check if all the images in the various frames are covered by it.
  
• Step 7: Open the "Web Layer" and select the slice over the first button/rollover button. You will see a circular white anchor in the middle. Click your mouse over the circle and drag. A connector will appear, drag it to the swap image slice and release the click. The connector will latch on to the swap image slice and a "swap image from" list box will appear with the list of frames. Select the first frame and click okay. Do the same for all the buttons and frames. You can edit the swap image by opening the Behaviors panel, selecting the slice and changing the swap image frame.
  
• Step 8: View how they work in the preview window and then export your PNG file. Fireworks will automatically create your html file and images in the directory specified. While exporting just check if the HTML and Images option is selected in the 'Save as Type' list box and the Export Slices option is selected in the 'Slices' list box. Test your HTML file in your browser.

Well done, your have just learnt to create your very own swap images!

Be innovative and try out multiple and advanced swap images. A good example is our Template 2- Sports.

We would love to hear your comments and any suggestions on future tutorials we can add to this section. Thanks!