July 15, 2020

Blog about IT, Design, Tutorial, SEO and a lot more.

How to Swap Image in Dreamweaver With Multiple Pictures?

How to Swap Image in Dreamweaver With Multiple Pictures

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:

How to Swap Image in Dreamweaver How to Swap Image in Dreamweaver

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:

How to Swap Image in Dreamweaver

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:

Dreamweaver Tutorial

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:

Dreamweaver Tutorial

5. Dialogue box will appear,

Dreamweaver Tutorial

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:

Last Updated on

A professional Web/Graphic Designer, working as Freelancer since 2000. Designing is my passion, blogging is my hobby.