Erst vor wenigen Wochen hat mir mein Chef einen sehr praktischen CSS-Trick für Hovereffekte mit Bildern verraten!

Problem: Hover-Effekte mit Bildern haben oft mit langsamen Server-Verbindungen zu kämpfen. Sprich wenn der User mit der Maus über den Link fährt verschwindet das Bild für eine Sekunde (oder auch mehr…) bevor dann dass zweite Bild erscheint. Sehr schlimm kann es z.B. bei einer Toolbar werden wenn  mehrere Links nebeneinander aufgelistet werden: Da jeder Link aus zwei Bildern besteht (Azeigebild und Hooverbild) muss der Browser jedes mal die Bilder beim Server abfragen gehen: Browser:”Hey Server, ist Hoverbild da?”, Server:”Moment… ja ist da!”, Browser:”Wärst du wohl so freundlich es mir zu geben?”, Server:”Hier hast es!”. Ungefähr so läuft dies bei jedem einzelnen Link ab. Das ganze Prozedere bei jedem Bild braucht enorm viel Zeit.

Lösung: Die Metanavi im Footer dieser Seite ist ein geeignetes Beispiel: Es sind 7 Navigationspunkte. Noch vor wenigen Wochen hätte ich dafür 14 einzelne Bilder benötigt ( je ein Anzeige- und Hooverbild).Der Trick ist nun nicht 14 einzelne Bilder zu machen, sondern ein einziges in welchem alle Navigationspunkte beinhaltet:

Man schreibt den CSS-Code so, dass beim hovern kein neues Bild geladen wird, sonder das einzelne grosse Bild nur verschoben wird. Dies hat den grossen Vorteil dass für die ganze Navi nur ein Bild und nicht 14 Bilder geladen werden müssen. Cool nicht?

Bisheriger CSS-Code für einen einzelnen Navigationspunkt.Über #flickr: hover wird ein zweites Bild geladen.

Optimierter CSS-Code: Durch #flickr:hover wird ein und das selbe Bild nur verschoben.

… und so sieht nun das einizige Bild (icons-contact.png) aus. Das coole daran ist dass es auch mit pngs’ funktioniert!