CSS-ImageRollOverPreload-Trick
12. August 2004
Ich habe auf dieser Seite einen simplen Trick verwendet, um zu verhindern, dass die RollOver-Effekte auf den »Reiterchen« der Hauptnavigation böse flackern, wenn man mit der Maus darüber fährt.
#reiter li a:hover {
background-image: url("/layout/doorrechts-hov.gif");
text-decoration: none;
color: black;
}
Das hat zur Folge, dass der Browser das Bild erst dann zu laden beginnt, wenn es eigentlich schon zu spät ist: Wenn der User mit der Maus über eine der Navigations-Reiter fährt. Das ursprüngliche Bild verschwindet, aber das neue Bild muss erst noch geladen werden, was per Modem leider über eine Sekunde dauern kann.
#inhalt {
clear: both;
background: white
url("/layout/doorrechts-hov.gif") no-repeat -1000px -1000px; /* Preload-Hack */
}
Ist kein echter Hack. Und ist auch nicht elegant. Aber es wirkt!