15 years of excellence
Get a QuoteReady to get started on your project?

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.


Size (150X150)

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 rollover_article1 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.

Click here to test this and compare with yours.
Download the supporting files.


Please fill in the fields below and click the "Send" button.
We will e-mail a link of this article.

Your Name
From Email Address
To Email Address
Please note: We will not spam or share your Email Address
Quick Enquiry

Related Readings

Verified Company

Inc.com Verified

Case Studies

Website details: A blog site with social networking features and user..

Challenge: This is a social community website, with..

More Case studies..

Recent Blog

What our clients Think


  • todd
  • Store Point
  • Open Solutions


  • WordPress
  • Joomla
  • Prestashop
  • CodeIgniter
  • Laravel
  • Responsive Web Design
  • Mobile Apps
  • HTML5