Make your own free website on

LinkExchange Network

dreamweaver tutorial
Multiple Image Swapping

Extend Dreamweaver's swap image action with multiple image swaps and then add layers that can be shown and hidden in conjunction with the image swap!

Creating the Images and Layers

View Demo

1. Create the images for the multiple swap. Each image should be the same size. Preload these graphics by inserting each graphic into one layer. Turn the layer visibility off. Position the main image on the page by using the property and layer inspectors to obtain an exact position. Dreamweaver will later ask to preload these images when they are swapped.

2. Insert the layers that will hold your content. Add text, graphics tolayer screen capture each layer and place directly under the top layer. Add layer-background-color to the layer definition for Netscape or layer-background-image url(yourimage.gif) if using an image. Use the layer inspector to line them up and set the top layer to visible, and the remaining layers to hidden.


3. Add buttons or text to later link the image swaps and the link screen captureshow/hide content. Give each layer and image a unique name that reflects its content. This will help when you apply behaviors to the layers.



Adding the Dynamic Behaviors

1. Assign a MouseOver behavior to your button or text links. Click link inspector text link and place a pound sign # in the link box of the property inspector. Go the Behaviors Menu, click the in the lower left corner of dreamweaver and the behavior menu will change to . Choose on MouseOver from the pulldown menu and then choose swap image from the actions. Choose the correct image to swap and click ok.


behaviors2. Now add another action to this MouseOver. With MouseOver highlighted, go to the actions and choose show/hide layers. The first text link (or button) will control control show the top layer. Click show. For each remaining text layer, select it and then press hide.

3. Next restore the original image with the swapped image. Choose on MouseOut, then swap image restore from the actions. Dreamweaver will now restore the original image. Do not add a MouseOut behavior to the show/hide content.

4. Complete these steps with each image and each text layer; use MouseOver to swap the image and then to show/hide content. Then add a MouseOut to restore the image. Again, do not add a MouseOut behavior to the show/hide content. Test the page with browser check to make sure it works in both 4.0 browsers

Rhine Home
Rhine Design
Home  Tutorial Index  Next  Design  Words  Gallery  Issues