Hover Images preloaden

Preloading ist eine beliebte Technik für wechselnde Hintergrundbilder. Doch braucht man dafür kein JavaScript oder gar PHP-Code. Mit CSS lassen sich Hintergrundbilder ganz einfach vorladen, wenn man folgenden CSS-Stil einheitlich einhält:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
a 
{
	background-image: url('hover_on.png');
}
 
a:link,
a:visited
{
	background-image: url('hover_off.png');
}
 
a:hover,
a:focus 
{
	background-image: url('hover_on.png');
}

Durch die Hintergrundbild-Definition im a-Tag wird das hover-Bild schon vorgeladen, was aber durch die Definition a:link für den Benutzer nicht sichtbar wird. So kann man gezielt, einfach und browser-kompatibel die wechselnden Bilder im Voraus laden.