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:
2
3
4
5
6
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-<img>'s).
2
3
4
5
6
7
8
9
10
11
12
13
background: transparent url('menu_news.png') no-repeat;
}
td#newsLink a:hover {
background: transparent url('menu_news_hover.png') no-repeat;
}
td#newsLink {
background:
transparent
url('menu_news_hover.png')
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.
Messages
pa download lng po
hola saludos a todos
@3
Klingt gut, so hätte man nur ein Bild und damit nur einen Request. Danke Dir!
Warum machst du dir das so umständlich?
Mach doch einfach beide Grafiken in eine Grafik und verschiebe diese mit der background-Eigenschaft per CSS. CSS-Sprite-Technik ist das Stichwort ;)
Thanks for the comment! It was not clear to me, that the correct order is "forced". I adjusted all code examples, so its hopefully educational ;).
About the Preview-Button: I should add that ;).
Some nitpicking: It should be
background: #color# #url# #repeat# #attachment# #position#;
for shorthand CSS background property. ;-)
td#newsLink {
background: url('menu_news_hover.png'); no-repeat -120px -120px;
}
PS: Where's that preview button? :P
