The Swap Image action swaps one image for another by changing the source of the image.

 

Use this action to create button rollovers and other image effects, including swapping more than one image at a time.

 

Note that because only the source attribute is affected by this action, you should swap in an image that has the same dimensions as the original.  Otherwise the image you swap in will be distorted.

When making your images name them clearly so you can find them readily in your images folder.

 

		In this example the lion word swaps with a picture. The lion word does not have the Restore Image on MouseOut box ticked. The mouse word swaps with a picture. The mouse and lion have one swap image each. The chick swaps with a hen and with the lion word so has two swap images.   The cow has four swap images. There are also sounds attached to the images: click on each to hear. For how to put sound on your page see Sound page

 

To make one swap image:

This makes one image swap for another like a rollover.

Have your two images ready, the same size. 

Insert one image on the page, this will be the front image that shows when the page opens.  (You might want to do this in a table or a div tag)

Select the image and write a name for it in the box on the far left of the Properties Inspector bar.

With the image still selected, go to the Behaviours panel (in Tag section, above files. Use Window > Behaviours if it does not show) Click on + sign > Swap Image.

In menu panel and Set Source Image box, browse to the image to swap to.

Tick Preload Images and Restore Image on MouseOut.

Click OK.  Check in Preview in Browser that it works how you want.

 

To make multiple swap images:

This makes "multiple event rollovers": Clicking on one image makes several others change.

Have your images ready, as above.

Insert the front images on your page and name them in the Properties Inspector bar.

Select the image that will change the others and go to Swap Image as above.

In the menu box, select an image that you want to change from the list and browse to the new one to swap, click OK to confirm file but keep the Swap Image panel open.

Choose another file from the menu box and choose its swap image.

Do this for as many as you wish

Click OK when all are done.  Check in Preview.

 

Note: ticking Preload Images makes them quicker to load as the images will be loaded into the browser's cache when the page is loaded.