dreamweaver rollover images tutorial
Outsource web development, offshore web development, offshore web application company from India
Launch Services Intro - Flash! Sample works! Search this site! Client Area :: Tracking, Documents etc.,
 
 
Creating rollover images with Dreamweaver
Tutorials  
Articles  
Free Scripts - Code Snippets  
Site Promotion  

 
Search this site
 
     
 

Powered by Freefind.com

 

 

 

Web Site Development  
Offshore outsourcing  
Graphic Design  
Site Promotion  
Custom Applications  
PDA Development  
E-Commerce Solutions  
E-Business Development  
Web site Maintenance  
Flash Development  
Website Redesign  
Mobile Applications  
Legacy To Web  
Portfolio  
 

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 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. Transparent Image!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.  
   
Click here to test this and compare with yours.
Download the supporting files.

 
  Home  I  About Us  I  Services  I  Price Quote  I  Resources  Contact Us  
Copyright © 2002 macronimous.com All rights Reserved.