Über mich

Startseite arrow Tipps & Tricks arrow Hover und Background-Images im IE6

Hover und Background-Images im IE6

Montag, 9. Juni 2008
Geschrieben von Armin Vieweg
Die Probleme des IE6 erlauben fast schon die Namensgebung: "Professor Kompatibilität", aber weil das viel zu lang und medienunwirksam ist, hier einfach die Lösung für ein bekanntes Problem mit Hintergrundbildern im IE6.

Gerade bei grafisch etwas hochwertigeren Navigationen verwendet man gerne Hintergrundbilder innerhalb der Links um so mehr Möglichkeiten im Design auszuschöpfen.

Meistens hat ein Link ein normales Hintergrundbild und ein weiteres, wenn die Maus darüber fährt. Der Quellcode dafür könnte im CSS folgendermaßen aussehen:

a {
  background:url(images/navigation.gif) repeat-x;
}

a:hover {
  background:url(images/hover.gif) repeat-x;
}



Rein theoretisch sollte jetzt bei dem Link ein Hintergrundbild erscheinen und sobald man mit der Maus darüber geht ein Anderes. Rein praktisch funktioniert dies jedoch nur im IE7 und Firefox korrekt. Der IE6 hat ein Caching Problem. Und zwar wird das Bild bei Hover jedes mal neu geladen, was zu einer Verzögerung in der Anzeige führt. Das ist ein bekanntes Problem,  jedoch gibt es kein JavaScript-Hack das dort Abhilfe schafft.



Die Lösung
Anstatt zwei Bilder zu verwenden, die nach einander geladen und angezeigt werden, benutzen wir einfach nur ein Bild, dass beide Zustände beinhaltet. Das eine Bild sieht dann z.B. so aus:
Menü Hover Effekt

Über die Background-Position können wir jetzt dem Hintergrund sagen, welcher Teil des Bildes angezeigt werden soll.

Wir tun mal so, als wäre das Bild 50 Pixel hoch. Die oberen 25 Pixel gehören zum Ausgangs-Zustand (der normale Link), die unteren 25 Pixel zum Hover-Effekt. Über folgende Definition in CSS können wir das dann definieren:

a {
  background:url(images/navigation.gif) no-repeat 0 0;
}

a:hover {
  background-position: 0 -25px;
}



In diesem Fall wird das Hintergrundbild um 25 Pixel nach oben verschoben, wenn die Maus über den Link fährt. Damit verschwindet der rote Teil aus dem sichtbaren Bereich und die weiße Fläche kommt zum Vorschein. So hat man den gleichen Effekt, als würde man ein anderes Bild hinein laden.

Diese Vorgehensweise wird im Übrigen empfohlen, unabhängig vom Browser, da keine Bilder per CSS nachgeladen werden müssen, was bei langsamen Geschwindigkeiten zu nicht unerheblichen Verzögerungen führen kann.

Damit Google übrigens etwas zu crawlen hat, bietet es sich an innerhalb des Links den Text aus dem Bild hinein zu schreiben und dann mit text-indent:-900em; zu versehen. So ist kein Text sichtbar, aber dennoch vorhanden. Viele auf Bildern basierende Navigationen werden so erstellt - und es hat sich bewährt.





  Kommentare (6)
 1 Geschrieben von: Kaede, am 09.06.2008 um 20:23
Ui... die Lösung kenne ich, aber normalerweise nicht vom Webdesign... 
Das einzige Problem hierbei ist, dass es manchmal pixelgenaue Layouts verhaut ;) 
Dennoch danke für das "Augen öffnen"! 
Werde ich bestimmt demnächst als Möglichkeit in Betracht ziehen.
 2 Geschrieben von: Armin Vieweg, am 09.06.2008 um 20:43
Pixelgenaues Design ist kein Grund diese Lösung nicht zu verwenden. 
 
Du kannst dem Link eine Breite und Höhe geben und Du kannst den Hintergrund auch in der Horizontalen nach Belieben positionieren. 
 
Ich sehe hier kein Problem in der Einhaltung von pixeligen Angelegenheiten ;) 
 
Gruß 
Armin
 3 Geschrieben von: Marcel, am 10.06.2008 um 09:59
Die Lösung ist super, vor allem wenn man überlegt sehr große oder komplexe Grafiken hovern zu lassen. Der Vorteil ist dann nicht nur im IE6 zu sehen, denn es gibt eine allgemeinen Geschwindigkeitsvorteil der CSS-Sprites (wie diese Technik genannt wird). Statt in diesem konkreten Fall 2 HTTP-Requests zu stellen wird nur ein einziger gestellt, somit verringern sich die Anfragen an den Server. Ein weiterer Vorteil ist, dass eine große Grafik optimiert weniger Speicherplatz benötigt (und somit weniger Traffic), als 2 kleine Grafiken, zwar nicht viel aber auch Kleinvieh macht Mist. Man kann sich sicherlich vorstellen, dass es bei vielen Bildern den entscheidenden Vorteil bringt. 
 
Grüße 
 
Marcel 
[URL=http://blog4web.de]Blog4Web.de[/URL]
 4 Geschrieben von: Kaede, am 18.06.2008 um 23:00
[QUOTE]Du kannst dem Link eine Breite und Höhe geben und Du kannst den Hintergrund auch in der Horizontalen nach Belieben positionieren.  
 
Ich sehe hier kein Problem in der Einhaltung von pixeligen Angelegenheiten ;)[/QUOTE] 
Nunja, manchmal nervt mich dann doch mein liebes IE-Boxmodell :) 
Aber irgendwo habt ihr beiden ja schon recht ;)
 5 Geschrieben von: Christian, am 25.07.2008 um 19:38
Hallo leute, 
super beschrieben das bsp. habs auch gleich eingesetzt und es klappt. Jedoch nur im Firefox, wie bekomme ich es im IE zum laufen - bei google war was von nem backgroun-position bug zu lesen,... ?! 
koennt ihr mir weiterhelfen ? 
sonniger gruss 
Christian
 6 Geschrieben von: Armin Vieweg, am 26.07.2008 um 11:29
Hi Christian, 
 
diesen Bug kenne ich ehrlich gesagt gar nicht. Also der IE hat ja viele Bugs, aber das es da auch ein Problem gibt, wusste ich gar nicht. 
 
Ich hab diesen Code schon mehrfach auf unterschiedlichen Seiten im Einsatz und da funktioniert es einwandfrei auch im Internet Explorer 6 und 7. 
 
Die Seite aus der das Beispiel stammt ist die [URL=http://www.lako-koblenz.de]lako-koblenz.de[/URL] Seite. Geh da mal drauf und schaue, ob der "Effekt" dort funktioniert. 
 
Ich vermute, dass bei Dir vielleicht ein anderer Style sich auf den Fehler auswirkt im IE. Schick mir einfach mal die URL, dann schaue ich es mir auch gerne direkt mal an. 
 
Gruß 
Armin
Letzte Aktualisierung ( Montag, 9. Juni 2008 )
 
< Zurück   Weiter >