How to add a rollover using styles

  1. Open one of your png images by double clicking on it.



  2. Find the image size by clicking on the Image menu:



  3. Make a note of the width and height in pixels



  4. In your index.html page navigate to the <head></head> element.


  5. Inside the <style> </style> element, paste the following code. Replace the square brackets and words with the red background with your information:
    ul#rollover{ 
         list-style-type: none; 
         padding: 0; 
         margin: 0; 
        } 
        
    #rollover a:link, #rollover a:visited { 
       display: block; 
       width: [the_width_of_your_image]; 
       height:[the_height_of_your_image];
       padding: 10px 0 16px 50px; 
       font: bold 80% Arial, Helvetica, sans-serif; 
       background: url([the_url_of_your_image]) top left no-repeat; 
       text-decoration: none; 
       } 
       
    #rollover a:hover {  
        background-image: url([the_url_of_your_over_image]);
       }
    
    #rollover a:active { 
        background-image: url([the_url_of_your_over_image]);
        }
    

  6. Navigate to the <body> element



  7. Place your mouse where you want the rollover to be



  8. Add the following code:
    <ul id="rollover"> 
        <li><a href="#"></a></li>
    </ul> 
    




  9. Save and view in the web browser!