CSS background image change on hover

I've set up my page so that my left nav bar is a series of background images which change when the user mouses over.

I learned how to do this from an older thread on this site. http://www.daniweb.com/forums/thread109916.html

This all works well except for one minor problem. The first time a user loads the home page and mouses over the images, the images turns to a white rectangle for a few seconds while the second image is loading. After the images loads in the cache, this isn't a problem. In other words, when the user navigates around the site and returns to the home page, the hover background image swap works beautifully.

Any ideas how to solve this?

Here is the page on the dev site:
http://bobbarlow.com/dev/index.php

Here is my code for one image:

Here is the css for that image swap:
.home_2_1 {
display:block; /* This cover full td */
background:url( http://bobbarlow.com/dev/images/home_2_1.jpg ) no-repeat; /*sets the background link image */
height:75px;
width:320px;
line-height:75px;
}

.home_2_1:hover {
background:url( http://bobbarlow.com/dev/images/home_hover_2_1.jpg ) no-repeat;
}

webdi

Newbie Poster

14 posts since Jul 2009

Reputation Points: 10

Solved Threads: 0

2 Years Ago

You could use javascript to preload images.

<head>
<script>
      preload_image = new Image(); 
      preload_image.src="http://mydomain.com/image.gif";
</script>
</head>

This will put the image in cache as the page loads.

harrierdh

Junior Poster in Training

62 posts since Dec 2009

Reputation Points: 10

Solved Threads: 13

2 Years Ago

alteration to harrierdh's technically correct answer
put the preload script between

almostbob

Posting Sensei

3,149 posts since Jan 2009

Reputation Points: 571

Solved Threads: 376

2 Years Ago

Just what I needed! Thanks everyone for your help!

webdi

Newbie Poster

14 posts since Jul 2009

Reputation Points: 10

Solved Threads: 0

2 Years Ago

often these images are better with transparent text (gif or png)
instead of loading a second image for the hover state, you change the background color

.thisstyle {background:url('image.url') #000ff no-repeat; }
.thisstyle:hover {background:url('image.url') #0ff00 no-repeat; }

the selected background color shows as the text color through the transparent text.
Not a big deal for one background image, a big deal for 100 background images and four possible states
element
element:active
element:hover
element:visited
it also keeps the css short, only a single td style needs to be defined

almostbob

Posting Sensei

3,149 posts since Jan 2009

Reputation Points: 571

Solved Threads: 376

2 Years Ago

Your best bet is to use sprites. Sprites are a fairly new idea and they work amazingly well with or without javascript. the idea is simple, you make the default and the hover state one image.

Let's say your image is width:320px; height:75px; what you really want then is for your link to remain that big and your background image to be twice as tall, ( width:320px; height:150px; ) where the top half is the rest state and the bottom is the hover state.

your code would then be as follows:

<style>
.home_2_1 {
display:block; /* This cover full td */
background:url(http://bobbarlow.com/dev/images/home_2_1_sprite.jpg) no-repeat 0px 0px ; /*sets the background link image */
height:75px;
width:320px;
line-height:75px;
}

.home_2_1:hover {
background:url(http://bobbarlow.com/dev/images/home_2_1_sprite.jpg) no-repeat 0px -75px ; /*sets the background link image and pushes the rest state up above view */
} 
</style>

the advantage is that when the browser dowloads one it downloads both. if you get really good at this you put all your link graphics in once file and just move the background position around.

have a look here the icons at the bottom all do that from one image (firebug it!)

infinitymedia

Newbie Poster

5 posts since Jan 2010

Reputation Points: 10

Solved Threads: 0

This question has already been solved

You