1 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!

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 to 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 show/hide content. Give each layer and image a unique name that reflects its content. This will help when you apply behaviors to the layers.

1. Assign a MouseOver behavior to your button or text links. Click 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.