Creating rollover images with Dreamweaver

This short and sweat article helps you to create rollover images within minutes. Learn some fun with Dreamweaver and use it in your web site, your visitor would love that.

Images can add liveliness to a web page. You can say much in pictures. And what about some fun with pictures? Dreamweaver can help you to do this interesting job. In dreamweaver you can create roll-over images. When you mouse-over on an image or link at another place in the same page you can make an image visible. When you mouse-out from the image or link you can make the image disappear. You might have seen this in many website and now you are going to do your-self.

Follow the steps below, at the end, I can see your smiley face.

1. Select the image you want to make it appear when you mouse over. In my example this is the image.

2. Create a transparent image of same size, In our example it is 150X150.

3. Open a page in dreamweaver and name it at rollover_test.html.

4. Insert a 2X1 table and make the border 0.

5. Insert your text in the first column. I have made just "Busy hands!" as my links text.

6. Insert "javascript:;" without quotes as Link url. Just see the image appears to make it clear.

7. Insert the transparent image on the second column.

8. Now go to windows->Behaviors. The behaviors panel will appear. Select the Link text first, and click the button. From the menu appears, select "Swap Image". You will see another window now. Here browse the first image which you want to see while mouse over. (Mentioned in the step and the corresponding image)

9. Now save the file, open it in your browser and test it. The End.