No Preload Image Rollovers

One of the most common effects used on web pages is the image rollover. There are two problems associated with the effect:

First. They require a pre-load to work smoothly. That means scripting must be enabled, and each image must be separately addressed.

Secondly. The increase response times because of extra graphics have to be downloaded. Even if the graphics are small; there is still a separate request and disk I/O on the server 10 graphics that are 3k takes longer than 1 graphic that is 30k

What we are going to look at here is using a single large image created from smaller ones and using the CSS background properties to manipulate that image to give us different presentations of it, for rollover effects. We will address both the problems that image rollovers create:

1. Elimination of the preload, and removal of the scripting to do it.
2. Reducing the images to a single background image that can be used for any element.

For the initial demonstrations we will use this simple image:

It was created by combining two background textures in a graphics editor. You can use any graphic, and as much detail as you want and whatever editor. The detail and quality of the image, and the tool that creates it make no difference to how the effects will work. You just need to record where the boundaries are between the image components so you will know how to set the CSS values.

To start let's just set up the background on a couple of div tags to use the two parts of the image. Here is the CSS:

#div1 {height:45px;
       width:108px;
       text-align:center;
       padding-top:10px;
       color:white;
       display:block;
       background: url("dual.gif") -2px -2px  no-repeat;
	}
#div2 {height:45px;
       width:108px;
       text-align:center;
       padding-top:10px;
       color:white;
       display:block;
       background: url("dual.gif") -116px -2px  no-repeat;
	}

The next step is to set up the same CSS for the states of our A tags:

a {height:45px;
       width:108px;
       text-align:center;
       padding-top:10px;
       color:white;
       display:block;
       background: url("dual.gif") -2px -2px  no-repeat;
	}
a:hover {height:45px;
       width:108px;
       text-align:center;
       padding-top:10px;
       color:white;
       display:block;
       background: url("dual.gif") -116px -2px  no-repeat;
	}

Of course, hover of other elements is pretty limited and we may want to do the rollovers using mouse events. It's really really easy. Start with this CSS for buttons:

.bcls1 {background: url("dual.gif") -2px -2px  no-repeat;
        color:yellow;
       }
.bcls2 {background: url("dual.gif") -116px -2px  no-repeat;
        color:yellow;
       }
And code the buttons this way:
<input type="button" class="bcls1" value="Button 1"
       onmouseover="this.className='bcls2'" 
       onmouseout="this.className='bcls1'">
<input type="button" class="bcls1" value="Button 2"
       onmouseover="this.className='bcls2'" 
       onmouseout="this.className='bcls1'">
<input type="button" class="bcls1" value="Button 3"
       onmouseover="this.className='bcls2'" 
       onmouseout="this.className='bcls1'">

SOME ADDED ADVANTAGES:
• You don't need to create a whole set of images because the text is not part of the image
• You don't have to worry about sizing, the default button behaviors handle it.
• You still have all the styling options available, because the image is just the background of the button, not the button itself.
• The whole thing can be changed is a matter of minutes by replacing the image used for the background; the text can be changed without have to use a graphics editor; and you don't have to create a new graphic to add a new button

We can even do transitions: on a click

   <script type="text/javascript">
var pntr=0;
var obj;
var x;
function shift()
{
   clearInterval(x);
   obj = document.getElementById('div3');
   pntr=0;
   obj.style.backgroundPosition='-116px -2px';
   x=setInterval('detailshift()',50);
}
function detailshift()
{
   pntr=pntr-2;
   obj.style.backgroundPosition=pntr+'px -2px';
   if (pntr<-116) 
   {
      clearInterval(x);
   }
}
   </script>

Now just one more little transitional effect that does not need images. Try clicking this and watch what happens to the box:

Cd&