[Developer]

Creating rollover images with Dreamweaver

Images can add livelyness 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 simly face.
1. Select the image you want to make it appear when you mouse over. In my example this is the image. Size (150X150) 2. Create a transparent image of same size, In our example it is 150X150. Size (150X150) 3. Open a 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 tranparent 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.