dracoblue.net

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:

http://dracoblue.net/style/menu_news_hover.png

and a

http://dracoblue.net/style/menu_news.png

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 {
    background:
        transparent
        url('menu_news_hover.png')
        fixed no-repeat
        -120px -120px;
}[/strong]

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.