Slight delay for hover bg image

[son]

I have a nice hover effect with another colour variation of a gradient. The code is:#topNav ul li a:hover {background:#262261 url(navHighlight.png) repeat-x;color:#FFF;}I noticed that there is sometimes a slight delay to display the image when you hover over link (the first time obviously only). Would it make sense to pre-load image via JavaScript or how do you combat this issues?Son

[thescientist]

you could do that, or you could use sprites.

[justinbriggs1]

I usually use composite images for CSS hovers. No delay, but a little more work. Just combine the two images into one image, with the default state on top and the hovered state on the bottom. Assuming that the size of one image is 61px (they both need to be the same size), you can use this:

<style>.logo {background:url(images/logo.jpg) no-repeat;display:block;height:61px;width:260px;}.logo:hover {background-position:0 -61px;}.logo span {display:none;}</style><a class="logo"><span>My Button</span></a>

[ShadowMage]

I usually use composite images for CSS hovers. No delay, but a little more work. Just combine the two images into one image, with the default state on top and the hovered state on the bottom.

Those are referred to as CSS sprites, which is what thescientist suggested. (And is also my recommendation)

[son]

Those are referred to as CSS sprites, which is what thescientist suggested. (And is also my recommendation)

Are sprites quicker than to repeat-x? My images are really small as they are repeated (301 bites only for highlight image)....Son

[son]

Are sprites quicker than to repeat-x? My images are really small as they are repeated (301 bites only for highlight image)....Son

I actually just found a remedy which works nicely. I highlight the current page in same manner as hover. That means that when homepage is loaded (or whatever other page is directly accessed) the image is immediately loaded.Thanks,Son

[ShadowMage]

Are sprites quicker than to repeat-x? My images are really small as they are repeated (301 bites only for highlight image)....

You still repeat the image. The only difference is that you have both states (hover and rest) on one image and change the background-position to display whichever state is needed.Say your image is 50px tall and 2px wide. Create an image that is 100px by 2px with your rest-state image in the top 50px and the hover-state image in the bottom 50px. Your CSS might then look like this:#topNav ul li a {background:#262261 url(navHighlight.png) repeat-x;background-position: 0px 0px;color:#FFF;}#topNav ul li a:hover {background:#262261 url(navHighlight.png) repeat-x;background-position: 0px 50px;color:#FFF;}

[thescientist]

it is preferable to have one larger file-size download (image sprite) than multiple HTTP requests (for multiple images)

[son]

it is preferable to have one larger file-size download (image sprite) than multiple HTTP requests (for multiple images)

OK, I got you now... Will change this...Many thanks,Son

[goggy]

Another option (not necessery a solution) is CSS3. New CSS3 suports radial and linear gradient. Problem is only that older browsers and IE doesn't support CSS3. But if you would like to try it here's an example:

#somediv {  background: -webkit-gradient(linear, left top, left bottom, from(red), to(black)); /* for chrome and safari browsers */  background: -moz-gradient(linear, left top, left bottom, from(red), to(black)); /* for firefox browsers */  background: -o-gradient(linear, left top, left bottom, from(red), to(black));  /* for opera browsers */}#somediv:hover {  background: -webkit-gradient(linear, left top, left bottom, from(black), to(red));  background: -moz-gradient(linear, left top, left bottom, from(black), to(red));  background: -o-gradient(linear, left top, left bottom, from(black), to(red));}

You need three lines, becasue every browser uses different prefix for CSS3. I think that Konquer uses prefix "-khtml" but I'm not sure about this one.

[son]

Another option (not necessery a solution) is CSS3. New CSS3 suports radial and linear gradient. Problem is only that older browsers and IE doesn't support CSS3. But if you would like to try it here's an example:

#somediv {  background: -webkit-gradient(linear, left top, left bottom, from(red), to(black)); /* for chrome and safari browsers */  background: -moz-gradient(linear, left top, left bottom, from(red), to(black)); /* for firefox browsers */  background: -o-gradient(linear, left top, left bottom, from(red), to(black));  /* for opera browsers */}#somediv:hover {  background: -webkit-gradient(linear, left top, left bottom, from(black), to(red));  background: -moz-gradient(linear, left top, left bottom, from(black), to(red));  background: -o-gradient(linear, left top, left bottom, from(black), to(red));}

You need three lines, becasue every browser uses different prefix for CSS3. I think that Konquer uses prefix "-khtml" but I'm not sure about this one.

Many thanks... Will have a go!Son