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!