CSS Rollover Bilder-Links ohne Javascript

CSS Rollover Bilder-Links ohne Javascript, nur CSS, Cache unabhängig. IE 5 - IE 7, NS 7 - FF 2x, Opera, Safari, Konqueror getestet


Auch im IE 5. Fehlerfrei, Ruckelfrei. Gecko ab NS 7 getestet, wahrscheinlich sogar NS 6.

Der ganze Trick liegt nur darin die Bilder, die das hover-Bild bereits enthalten als Hintergrundbilder in einem Div-Container unter zu bringen.
Oben das StandardBild, direkt drunter (in einem Bild) das Hover-Bild. Dann wird dem a ein display:block verpasst und dem a:hover ein negativen Margin,
der genau halb so groß ist, wie das Bild selbst.

CSS Hover Pic Splash

 

Zum Ruckeln kommt es nur, wenn man versucht entweder:
1.) ein neues Hintergrundbild per CSS zu vergeben,
was zwar geht, aber im IE, Version Nr.6, also im IE6 immer ruckelt weils stets nachgeladen wird, egal, wie das Caching eingestellt ist...
und 2.) wenn man versucht die Hintergrund-position zu verändern. In dem Falle wird im IE
das Bild dennoch nachgeladen, definitiv ein Bug. Das bedeutet: Man darf das background-image selbst nicht anfassen,
sondern nur das Fenster drum herum verschieben, damit der Besucher das gefühl bekommt, ein anderes Bild zu sehen,
wobei es nur die untere Hälfte des selben Bildes ist.

 

Es gibt noch einen weiteren Bugfix, wobei man dann einfach nur Hintergrund-Bilder benutzt die per CSS ":hover" ausgetauscht werden, ohne das es im IE6 Ruckelt. Dazu muss man die Berechtigung haben eine .htaccess Datei im obersten Web Ordner anzulegen. Und es muss das mod_expire Modul des Apache geladen sein. Und dies hängt komplett vom Provider ab, oder falls man einen eigenen Server hat, dann vom jeweiligen Systemadministrator. Der .htacces Bugfix für den IE, Version 6 ganz unten zu sehen

 

Falls Ihr noch Zweifel habt, dann schaltet caching und Javascript aus und schaut
euch unbedingt die Bider innerhalb der Links während eines Mouseover genau an.

 

Um sich die Bilder im Ganzen genau anzuschauen:
Im IE: rechte Maustaste, Bild speichern unter, dann dort, wo ihrs gespeichert hat, genau anschauen.
Im FF gehts einfacher: einfach Rechte Maustaste -> Grafik anzeigen.

 

In meinem Beispiel habe ich eine li-Listen-Navigation benutzt, die ul und li tags kann man getrost weglassen, es ist nur ein Beipiel
für Webmaster, die sich an die Standards halten wollen, also eine navi als Liste.

 

Download Beispiel (RAR)
oder als Selbstenpackendes ZIP - File als EXE

 

 

Das Link Bild sieht in Wirklichkeit so aus:

 

Die .htaccess Lösung, gefunden im MODx CMS:
Link zum Download der aktuellen MODx CMS Version
Link zur deutschen MODx CMS Seite

# The following directives stop screen flicker in IE on CSS rollovers. If
# needed, un-comment the following rules. When they're in place, you may have
# to do a force-refresh in order to see changes in your designs.

ExpiresActive On
ExpiresByType image/gif A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/png A2592000
BrowserMatch "MSIE" brokenvary=1
BrowserMatch "Mozilla/4.[0-9]{2}" brokenvary=1
BrowserMatch "Opera" !brokenvary
SetEnvIf brokenvary 1 force-no-vary

 

Diese Lösung ist nahezu Perfekt, bis auf der Tatsache, dass man sie - solange man noch am entwicklen ist und mit dem IE6 die Änderungen prüfen will - besser auskommentiert lassen sollte, um immer die Aktuellen Bilder (solang man diese ändert) auch sofort sehen zu können, und dass man dazu die Berechtigung haben muss und das Modul "mod_expire" und "mod_setenvif" geladenen sein müssen. Aber definitiv die einfachere Variante. Wobei man dann für dem IE6 an die Bilder, die sich ständig ändern sollen, am besten einen $_GET Parameter mit nem Timestamp dahinter dranhängen sollte, damit jeder diese Änderungen auch sofort zu sehen bekommt, falls sofort erwünscht, oder man schraubt in der Expire Anweisung die Zeit auf eine Stunde herunter...je nach Bedarf.

 

nach oben