Wozu braucht man überhaupt Rollover-Effekte?
Klar. Jetzt könnte man erstmal fragen, wozu man Rollover-Effekte überhaupt benötigt? Natürlich kann man argumentieen, dass Rollover-Effekte immer nur Dekoration sind – und eigentlich keinen Nutzen darstellen. Die Diskussion möchte ich aber lieber ein anderes mal führen. Hier zunächst einfach mal ein Beispiel von einem Foto mit einem solchen Graustufen-Farbe-Rollover-Effekt:
Entsättigtes Bild mit Vollfarbe bei Rollover (mit der Maus über das Bild fahren)
Das Entsättigen von Fotos kann als Rollover-Effekt zum Beispiel für Vorschaubilder (z.B. Thumbnails) verwendet werden. Der Wechsel von der Grau- zur Farbversion ist dabei subtiler, als beispielsweise ein Zoom oder das ändern der Transparenz (opacity). Insbesondere wenn man die Vorschaubilder nicht komplett entsättigt und den Rollover-Effekt mit einer zeitlichen Verzögerung (Transition) versieht.
Halb-entsättigtes Bild mit Vollfarbe bei Rollover (mit der Maus über das Bild fahren)
Der Rollover-Effekt kann über die CSS3-Funktion „filter“ bereits von den meisten aktuellen Browsern dargestellt werden Allerdings verträgt sich „filter“ leider wieder mal nicht mit dem Internet Explorer – zumindest nicht mit der aktuellsten IE-Version 11 – und auch nicht mit der 10er Version und mit Edge. Microsoft hat beim Internet Explorer ab Version 10 die früher funktionierende Anweisung filter: gray leider über Bord geworfen. Man könnte die Entsättigung nun zwar mit einer JavaScript-Datei auch für IE10+ erzwingen, aber das spare ich mir erst mal.
Auch Firefox < V.35 unterstütze die Anweisung filter nicht. Wenn man den Entsättigungs-Effekt nun wenigstens für alle anderen halbwegs aktuellen Browser einsetzen möchte, kommt man also wieder einmal um einen entsprechenden Workaround nicht drumherum. Allerdings ist dieser Workaround eher einfach zu implementieren. Man benötigt lediglich ein SVG-Bild, das den Entsättigungs-Effekt für frühere Version von Firefox (4 – 34) bereitstellt. Hier nun die Details – möglicht kompakt:
Die Farbfotos, die zunächst als Schwarz-Weiss-Bilder dargestellt werden sollen, sind hier exemplarisch mit der Klasse „desaturate“ (also Engl. „entsättigen“) ausgezeichnet.
<img src="/bilder/farbfoto.jpg" class="desaturate thumbnail">
Für fast alle Browser gibt es nun also eine CSS-Anweisung, um ein Bild zu entfärben:
.desaturate { filter: grayscale(100%); /* Standard */ -webkit-filter: grayscale(100%); /* Webkit */ filter: url(/elements/grayscale.svg#desaturate); /* Firefox 4-34 */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(1); /* Old WebKit */ }
Bei Maus-Rollover (:hover) soll das Bild als ursprüngliche Farb-Version dargestellt werden – also werden in einer zweiten CSS-Anweisung die vorher gesetzten Filter aufgehoben:
.desaturate:hover {
filter: grayscale(0%);
filter: none;
-webkit-filter: grayscale(0); /* Old WebKit */
}
Die SVG-Datei ist ja eigentlich kein Bild, sondern eine Sammlung von Vektoren, die im XML-Format gespeichert werden. Daher kann dieses „Bild“ auch einfach mit einem Text-Editor erzeugt und an passender Stelle gespeichert werden. Hier der Inhalt:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="desaturate">
<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
</filter>
</svg>
Hier noch schnell der Link zur Übersicht bei Can I Use, bei welchen Browsern die CSS-Filter funktionieren:
http://caniuse.com/#search=filter
Und hier weiterführende Lektüre zum Thema:
- „Convert Images To Black And White With CSS“ (www.demosthenes.info)