Swapping Images

Learning a technique and forgetting how to do it can be frustrating. I have played with and used Dreamweaver's swap image behavior many times, but I always have to go back to a refresher tutorial to remember exactly how to do it.

Here is a good tutorial from Adobe on the swap image behavior.

For my purposes, i want to swap an image when I mouse over another image. Note that the image I mouse over stays the same, another image, the source image, is swapped. This technique is commonly used in shopping carts to show multiple colors or styles of a similar product. A thumbnail image is often used for the mouseover, while the larger view is substituted. This is also the same annoying behavior behind pop-up windows.

The key steps are:

1. Name the source image that will be replaced.
2. Now, select the smaller thumbnail image. The mouse over behavior will be applied to this image to create the swap image behavior.
3. With the thumbnail selected choose behaviors. Click the plus sign and swap image.
4. In the swap image dialog box, first find the source image that you previously named.
5. Now in the box below, browse to the new source image that will replace the original image.
6. Click ok. You are done.

Such an easy and effective technique. Why do I forget it?