Preloading CSS-images for :hover

The top navigation here at dracoblue.net is done with css images, which also have a :hover-effect (showing a lighter version of the image).

So there is a:


and a


In CSS it looked like that:

a#newsLink {
    background: transparent url('menu_news.png') no-repeat;
a#newsLink:hover {
    background: transparent url('menu_news_hover.png') no-repeat;

All this is quite common, but I was facing a usability problem here. The

*hover.png files won't be loaded until one of the links got hover'd. In the perspective of the server owner, you might be happy about that. But for the user, the image is unavailable for nearly a second, because it takes time to deliver the image to the user.

So here is my solution to preload the image (without using javascript or stub-'s).

td#newsLink a {
  background: transparent url('menu_news.png') no-repeat;
td#newsLink a:hover {
  background: transparent url('menu_news_hover.png') no-repeat;
[strong]td#newsLink {
        fixed no-repeat
        -120px -120px;

I moved the #newsLink to the td surrouding the newsLink. And at the end, I added a new decleration for a non-repeating and - with coordinates -120x-120 - clearly invisible image.

In css, html, open source by
@ 23 Feb 2009, Comments at Reddit & Hackernews

Give something back

Were my blog posts useful to you? If you want to give back, support one of these charities, too!

Report hate in social media Campact e.V. With our technology and your help, we protect the oceans from plastic waste. Gesellschaft fur Freiheitsrechte e. V. The civil eye in the mediterranean

Recent Dev-Articles

Read recently

Recent Files