Comments on: Preload :hover images in CSS

By: Martin Bour

Martin Bour — Sun, 19 Nov 2006 14:01:39 +0000

I landed on your site looking for a way to preload background images for links. I could not get your solution to work. This is what I was doing:
a.about { background: url(images/menu/about_ON.gif) 50% 50% no-repeat; } a:link.about { background: url(image/menu/about.gif) 50% 50% no-repeat; } a:hover.about, a:focus.about { background: url(images/menu/about_ON.gif) 50% 50% no-repeat; }

I found another solution which seemed to work for me. I ended up creating a div on the page with class imageLoader which looked like this:
.imageLoader { background: url(images/menu/about_ON.gif); background: url(images/menu/products_ON.gif); background: url(images/menu/downloads_ON.gif); background: url(images/menu/messages_ON.gif); background: url(images/menu/news_ON.gif); background: url(images/menu/contact_ON.gif); visibility: hidden; }

then I had my link backgrounds set up normally with a, and a:hover classes.

it is working on mac (Safari and Netscape), but have not tested all browsers.

By: Lucas Recalde

Lucas Recalde — Tue, 03 Jan 2006 19:46:02 +0000

Thanks a lot. I apply your solution but i have to do some changes to work in IE. I’ve use a shim image for each menu. The result is XHTML 1.0 compliant and works very well. You can check it at http://www.doliaku.com.ar (is the main menu).
PS: sorry for my english language, i hope you understand what i am trying to say!

By: moo

moo — Tue, 03 Jan 2006 04:24:14 +0000

are you sure is’s working? i’ve tested under xpsp2 lastest patched with httpwatch, the hover image is NOT preloaded

By: Cuzog

Cuzog — Mon, 21 Nov 2005 00:25:55 +0000

Just thought I’d let the people having problems know that the reason it doesn’t work as written here in IE is that IE goes with the “a” background rather than the “a:link” background when the link is already visited. The corrected code that also works in IE is this:
a { background: url(image_hover.gif); } a:link, a:visited { background: url(image_default.gif); } a:hover, a:focus { background: url(image_hover.gif); }

By: Mike

Mike — Mon, 07 Nov 2005 21:52:22 +0000

I ran into the same problem where I was using list elements for a menu, and all menu items had its own image / hover-image pair. The solutions I’d seen I didn’t like or didn’t work so I came up with a solution I’m happy with and which seems to work always to get rid of the flicker. The solution I came up with is to simply add the hover state image within the HREF and give the image a visibility:hidden style (I’m using style=”preLoad” and then have the CSS in a seperate file). I feel this is the ‘cleanest’ way to do it without too much overhead.

For an example have a look at the source code of this site.

Just my 2 cents, hope it helps.
Mike.

By: Matthew

Matthew — Tue, 25 Oct 2005 17:09:18 +0000

This seems like such a cool and simple way of dealing with preloading backgrounds, and I understand how it is supposed to work - but I couldn’t get it to work in any browser I tried. Has ANYONE had success with this? And could you point out an example of it working?

Back to javascript preloading for now…

By: feaverish

feaverish — Wed, 12 Oct 2005 20:23:03 +0000

Update: I still couldn’t get this technique to work, but I was able to get the same effect by applying the hover image to the background of the container element (in my case the list item element) and the default, non-hover image to the contained link states (except :hover, obviously). The only drawback (besides a ton of IDs) is that a visitor with a slow connection will see the hover image load before the default image. In my case it wasn’t a big deal, and it actually looks kind of cool.

Zeldman details the procedure here (2nd item).

By: feaverish

feaverish — Wed, 12 Oct 2005 15:55:50 +0000

Wow, I just can’t get this to work. I’m using unique IDs for each of the links; could this be the problem? My code looks something like this:
#home {background: url(image-hover.jpg)} #home:link {background: url(image.jpg)} #home:visited {background: url(image.jpg)} #home:hover {background: url(image-hover.jpg)}

The hover image does not preload for me at all; I get a flicker while the hover image loads for the first time in every browser (though it seems like sometimes it preloads the hover image in Safari; don’t ask me why).

What am I doing wrong? (Oh and you can see the site?and flickering?in action at http://www.lisadejohn.com.)

By: jehiah

jehiah — Mon, 19 Sep 2005 03:21:51 +0000

Ok, I’m not a huge fan of preloading images in css, but I could see it’s uses. If any of you are looking for something in Javascript I have a clean implementation up on my site http://jehiah.com/archive/simple-swap

By: Tim

Tim — Sat, 06 Aug 2005 09:08:55 +0000

Great idea, saved me a load of trouble.

I think the :hover class needs to be defined last though.

This setup works for me:
a{background: url(hoverimage.gif) 30px 40% no-repeat;} a:link,a:visited{background: url(normalimage.gif) 30px 40% no-repeat;} a:hover{background: url(hoverimage.gif) 30px 40% no-repeat;}

By: Matt Keogh

Matt Keogh — Fri, 08 Jul 2005 09:48:26 +0000

argh! Just found out about the IE Image flicker problem! Is there no end to this madness!?

It appears that the bg image does load into the cache but then expires or something after a short while and the page reloads from the server rather than the cache.

great.

By: Matt Keogh

Matt Keogh — Fri, 08 Jul 2005 09:13:51 +0000

I suppose another technique would be set the background inside a different element such as a list item and then use the background position to move this away.

No as elagant as the above method though…

By: Matt Keogh

Matt Keogh — Fri, 08 Jul 2005 08:52:47 +0000

Eric, thanks for looking into this for me but I meant to leave that comment out. You can’t have a comma after the declaration only after the selector.

I re-checked my method looking at my temporary internet files folder and the rollover image does not appear in there until after I have rolled over (it does not get preloaded).

I have re-tried the above method and it shows the rollover image without rolling over. It is as though the a:link does nothing. I am going to look into this further.

Does anyone have a link to a working example so I can work out what I am doing wrong and confirm this works?

On a side note - the a:focus does not work for IE but a:active does.

By: Eric

Eric — Thu, 07 Jul 2005 23:40:59 +0000

Well, I don’t know if it’s correct or not, but you are missing the comma after your first line:

a{background: url(img_hover.gif); },

At least you’re missing it if you’re trying to use the example from Marko… also, you’re missing the a:focus part…

By: Matt Keogh

Matt Keogh — Thu, 07 Jul 2005 16:38:21 +0000

Maybe I am being a bit slow today but I could not get this to work.

I think it was (either todays slowness) or the order of the links and the a:visited selector.

I tried this:
a{background: url(img_hover.gif); } a:link, a:visited { background: url(img_default.gif); } a:hover { background: url(/img_hover.gif); }

This loads the background image for all links states, turns it back to the top image for the up state and visited links and then lastly overrides this with hover.

By: Eric

Eric — Sun, 03 Jul 2005 20:55:23 +0000

Hi! I’m still a bit new to using CSS style sheets. I still don’t understand how to use your tip here, but it sounds like it would be the best thing to avoiding adding more html to my pages to preload the images. I want to use it for my navigation buttons. An example of some of my nav button CSS code can be found at http://www.esbuys.com on any page of the site (all using the same CSS file). How do I incorporate your tip into it? Thank you!

By: marko

marko — Thu, 30 Jun 2005 14:00:47 +0000

@trovster:

“I’m guessing it works how Sage described it, but a confirmation would be nice!”

Consider Sage’s description confirmed : )

By: trovster

trovster — Wed, 29 Jun 2005 18:41:57 +0000

Hey, that’s pretty nifty. I’m guessing it works how Sage described it, but a confirmation would be nice!

I’ll still stick to the Pixy method for my rollovers. I tend to merge images together anyway, hopefully saving size in the process but definitely saving trips to the server and thus speeding up rendering time.

By: michael

michael — Tue, 28 Jun 2005 22:16:18 +0000

the problem with pixies rollovers is that he uses fixed width (or height) buttons, which don’t scale very good (to say the least). But why should your method be better for modem/isdn users ? you have to download all images, be it in one merged (pixie) or be it in two seperate. i would be suprised if the difference in filesize would be that much. prob. a few bytes. the real advantage of pixies method is that the rollover-state is there when you *need* it. Your method seems to do the job as well, besides it allows us to use *wallpaper*-buttons, that scale much better. so 2:1 for you ;-)

No matter which one you choose,the css will get messed up again with tricks, and workarounds.

By: Leo

Leo — Tue, 28 Jun 2005 12:22:14 +0000

Hmph… nice idea. I’ve also been using the “position hover images off screen” technique described by Peter, but your suggestion is very simple and cleaner. Nobody aware of any instabilities with this method?

Thanks.