It is just like Rollover image behavior in Dreamweaver, but normally here we use Pictures. Suppose you want to paste an image and you need to display another image when you bring your mouse pointer over it. So it is also useful for New Designers this is called Swap Image by using Multiple Images in Dreamweaver, lets start working on this simple and short Tutorial, but an important one for Beginners.
1. Lets start with a new HTML file. Save this file and put two images at same location where this file has been saved. I’m going to use the following two images:
2. Better to take a table before, so run the command Insert >> Table and give 1 in Rows and 1 in Columns and width as the width of image, i.e. here 289px:
3. Now click inside to table cell to bring cursor and insert your normal picture by running the command, Insert >> Picture and select the normal picture, like:
4. Keep selecting the image and run the command Window >> Behavior or just press Shift+F4 key. Click on the ‘+’ button and select Swap Image:
5. Dialogue box will appear,
Click on Browse button and select the Rollover image. Check Preload images, it will download normal and rollover images at a time and Restore images onMouseOut, so that when you will drag your mouse pointer away from the picture, normal picture will come back again.
See the result below:
About The Author
