How to use Swap image behavior in Dreamweaver

Dreamweaver provides several tools in determining the behavior of individual elements on the page. In this lesson we will show you an interesting one, how to change an image above the link.

Create new HTML document.

Click Insert and select Image. Than select any image and click OK.

Below the image write Picture 1 and Picture 2 and then select an image.

At properties specify a name for the picture.

Select text Picture 1.

At Link field insert sign # or write a web page address.

Click Windows and select Behaviors. Behaviors must be marked.

Behaviors window appears on the right side. Click + icon…

…and select Swap image.

At Images field select the picture you have named under Properties.

At Set source to field select the picture you want to be shown when you will be above selected text.
 
Select Preload text and click OK.

We have set the first rule.

Now select text Picture 2 and repeat the procedure, only this time select other picture in the Set source to field.

Save the document (Ctrl + S) and press F12 to open the page in a browser.

Now go with the mouse above Picture 1 link and the picture should change.

Now go with the mouse above Picture 2 link and the picture should change to the other picture.