Member Avatar for webdi

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:
<td ><a href="northamerica.php" class="home_2_1">&nbsp;</a></td>

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;
}

  • 5 Contributors
  • 6 Replies
  • 2K Views
  • 4 Years Discussion Span
  • Latest Post Latest Post by dellmerca
Member Avatar for harrierdh

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.

Member Avatar for almostbob

alteration to harrierdh's technically correct answer
put the preload script between </body> and </html>
preload in the head slows down the page load by a considerable amount
having the 'extra' images load last after the page is functioning makes the apparent page load faster
valid code requires type attribute

if javascript is turned offf in the browser javascript preload will not work and can be something like

<noscript>
<div style='display:none;'>
<img src="http://mydomain.com/image.gif" alt='' width='0' height='0'>
<img src="http://mydomain.com/image.gif2" alt='' width='0' height='0'>
<img src="http://mydomain.com/image.gif999" alt='' width='0' height='0'>
</div>
</noscript>
</body>
<script type='text/javascript'>
 preimage = new Image(); 
 preimage.src="http://mydomain.com/image.gif";
preimage2 = new Image(); 
 preimage2.src="http://mydomain.com/image2.gif";
//etc up to
preimage999 = new Image(); 
preimage999.src="http://mydomain.com/image999.gif";
</script>
</html>
Edited by almostbob because: n/a
Member Avatar for webdi

Just what I needed! Thanks everyone for your help!

Member Avatar for almostbob

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

Edited by almostbob because: n/a
Member Avatar for infinitymedia

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!)

Edited by infinitymedia because: n/a
Member Avatar for dellmerca

CSS

.imgBox
{
    width: 191px;
    height: 191px;
    background: url(duck.png) no-repeat;
}
.imgBox:hover {
    width: 191px;
    height: 191px;
    background: url(peng.png) no-repeat;
    }

HTML

<div class="imgBox">

Full Source...CSS background image change on hover

commented: solved FOUR YEARS AGO not much point in posting another, worse answer,sprites have superseded the lin k you posted -3
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.