Swap Image

Swap Images

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?

Using Swap Images is an interesting and attractive graphic design idea for designing a web site [more web design ideas]. Swap Images is basically a Javascript effect similar to the rollover effect where a group of web objects [web object - a slice, hotspot, or button] trigger the change in the display of (swaps) another graphic when you mouse over them and may or may not revert back to the original image on mouse out of the web object. The onMouseOver and onMouseOut attributes of the link tag are used to make this functional. The rollover or swap images are preloaded into the page when it is loading, this ensures that the swap images are displayed quickly.

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?

The whole Swap Images functionality is controlled by the JavaScript functions automatically generated by Fireworks or Dreamweaver. These functions are very optimized and you can always trust the code generated by these Adobe tools. If you are a designer-cum-programmer it is good to know what the code does: There are 4 key functions generated: 1) To Preload the Images 2) To Swap the Image 3) To Restore the Swapped Image 4) To find Image objects. These functions are the same for Rollover Buttons/Images too, only the place from where they are called is different.

Prerequisite Knowledge

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 Required

Adobe Fireworks: Since this tutorial covers a core feature of Adobe Fireworks, any version of it will do.

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

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.

Swap Image using Dreamweaver

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:

1. Design your buttons/images and their rollovers in any graphic editor. Export them to your site's images folder.
2. Now open your web page in Dreamweaver click Insert > Image Objects > Rollover Image.
3. 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.
4. To force an image swap from another link apart from the rollover image created, just copy the javascript onMouseOver and onMouseOut functions from the rollover image link and paste it into the <A> tag of the link that needs to swap the image.
5. 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.

Further reading:

• 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.

Related Links :: Design Concepts | Design Basics | Web Design Tips
Design a Website | Website Header | Website Background
Website Navigation | Design Ideas

Please like, +1, link to and share this SmartWebby resource if you found it helpful. Thanks!