In the previous discussion, I showed you how to create a button menu effect using two background images that are swapped when the user hovers over the button.

You may have noticed when you first tested out the menu buttons that there was a delay before the blue button appeared when you first hovered over the menu. The pale button disappeared briefly leaving a white blank spot before the blue rollover button appeared. This delay results from the time it takes for the browser to download the new rollover image before it can display it. The delay only occurs the first time a user rolls over the menu. After that, the image is cached, and the image does not need to be downloaded again. Even so, that flicker can be distracting/disconcerting to the user, so it's best to prevent it.

IE6/Win does not check to see if a rollover image has already been downloaded for a different purpose, so the first delay occurs even if you use the Pixy method ... in IE6/Win.

JavaScript can avoid this problem by preloading all rollover graphics as the web page is loaded. Since the images are cached well before the page is accessible to the user, there is no delay when the user begins interacting with the page.

There is a basic technique to preload a rollover image Open in a New Window via CSS, but it is limited to a single preloaded image per element, so it is of limited use.

However, there is a clever technique that utilizes a single image to generate all the desired rollover images for a menu. It's called the Pixy method, named after the person who conceived the technique, Petr Stanicek (aka Pixy, of Pixy favelets fame). It takes advantage of the following characteristics of background images:

In the previous example, I used the following two images to create a rollover menu effect. This was the image for the menu item in its normal state:
'normal tab background'
and this was the image for the menu item in the hover state:
hover tab background
Each image is 209 pixels wide and 25 pixels high.

The Pixy method joins all images into a single image, and positions the background image so that the desired portion of the joined image is visible through the element's visible box.

First, the two images above are joined into a single image:
joined background images

Then, the rules for the various states of the menu are created by adjusting the positions of the background image for each state. This example is pretty easy since there are only two images to deal with. I can take advantage of the top and bottom position values to simply shift the background image all the way to the top of the image to display the top half of the image, or all the way to the bottom to show the bottom half of the image.

Here are the rules that have changed from the prior example (the markup hasn't changed):

#vertMenu li { height: 25px; width: 179px; line-height: 25px; padding-left: 30px; background-image: url(images/vertical-button_rollover.gif); background-position: top left; list-style: none; }   #vertMenu li:hover { background-position: bottom; }

As you can see, the rule for the HOVER state simply moves the background image position to the very bottom of the image, so you see the bottom half of the image on mouse rollover, the blue button. A separate image does not need to be displayed for the hover state, so there is no need to download an image when the user initially interacts with the menu!

If you test this menu, you can't discern a difference between this menu and the menu that uses two separate images ... except that you don't observe a 'flicker' the first time you view the page and rollover the menu!

Resources