Many of us us roll over images on our navigation or other items in our web pages.  One thing that can be problematically is users with slow connections or larger images can cause a flashing when you roll over when the file is being downloaded.  One way to solve this is to use JavaScript to preload your images on the page.  However, there is a much easier way to do it with just a little CSS.

The first thing to do is to create the images for the roll overs. Once you have these don what you need to do is put on on top of the other so they look something like this. So the trick comes when setting up the background image in the CSS.

   1:   <style>

   2:      #navigation a{

   3:          background:url(images/button.gif) no-repeat 0 0;

   4:          width:41px;

   5:          height:45px;

   6:          display:block;

   7:          text-align:center;

   8:          float:left;

   9:          margin:0 5px;

  10:          padding-top:10px;

  11:          text-decoration:none;

  12:          color:#333;

  13:      }

  14:   

  15:      #navigation a:hover{

  16:          background:url(images/button.gif) no-repeat 0 100%;

  17:          color:#FFF;

  18:      }

  19:   

  20:  </style>

What you do is basically change the background position so that only one of the images is displayed at a time.  This means that once the first image is loaded they are both there everything is done on the client side.  While this isn't that great of a trick it is handy in making roll overs with complex images just as reflections. 

Here is a sample: