Image Swap Effect using Fireworks or Dreamweaver
Learn just how easy it is to create swap images in this step-by-step tutorial.
What are Swap Images?
Important Note: If you are looking to swap the same image to another then please read our Rollover Image tutorial for this.
How does a Swap Image work?
This tutorial teaches you how to create an image swap effect using Fireworks or Dreamweaver and thus assumes you are familiar with some design software, even if you are new to Adobe Fireworks or Adobe Dreamweaver. However be assured that our detailed instructions can be followed by even a beginner.
Swap Image using Fireworks
The Fireworks software makes it extremely simple to create and use swaps for your web site. You must try it out! Read on.
Software RequiredAdobe Fireworks: Since this tutorial covers a core feature of Adobe Fireworks, any version of it will do.
Compatible Versions of Fireworks for this Tutorial
Note: The features and instructions discussed in this tutorial are same across all Fireworks versions listed above; Screenshot images may differ. Recommended Version: Fireworks CS6
Create the Image Swap Effect
Create a new file in Fireworks and follow these steps to create your own attractive swap images:
- 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 this Learning/Kids Template. 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! You now know how to create your very own swap image effect.
Compatible Versions of Dreamweaver for this Tutorial
Note: The instructions in this tutorial are same across all Dreamweaver versions listed above; Screenshot images (if any) may differ. Recommended Version: Dreamweaver CS6
Dreamweaver has an inbuilt Swap Image behaviour via which creating swaps is quite easy.
Create Swap Images
Swap Images using the Behaviours Window: We can easily create swap images using the Swap Image Behaviour inbuilt in Dreamweaver.
To locate the swap image behaviour click on Window > Behaviours - the Tag Inspector Panel will show up with the Behaviours Button as pressed. Just click on the plus (+) button shown and you'll see the Swap Image behaviour listed. Click it and a pop-up window asks you to select the image on your page to be swaped and the source of the swap image. Select these and click OK and your swap image is done!
Create Swap Images with Rollovers Images
In some cases (like our Example 1) you might need to add rollover with swap images and here you can reuse the Rollover Image behaviour. All you need to know is understand the logic behind how the rollover plus swap images is working in Example 1. Basically the swap images example that you see just calls the same functions as the Rollover Image behaviour that's inbuilt in Dreamweaver - the only difference being that the rollover functions are called from a different location (image or link).
Follow these steps to create your own attractive Swap Image effect using Dreamweaver:
- Design your buttons/images and their rollovers in any graphic editor. Export them to your site's images folder.
- Now open your web page in Dreamweaver click Insert > Image Objects > Rollover Image.
- In the pop-up window that appears give your rollover a name, alt tag, link and browse to locate the Original Image and Rollover Image. Click OK.
- Once you get one link working just duplicate and reuse it by just changing the location of the swap image desired.
That's it; you now know two ways on how to create your very own swap image effect using Dreamweaver!
Be innovative and try out multiple and advanced swap images. A good example is our Sports Template 2.
- Learn how to create basic Image Rollovers using Fireworks or Dreamweaver.
- Learn how to make Text Links Rollovers in our Cool Text Effects using CSS Styles tutorial.