Erik Pöhler

Glanz und Gloria mit Javascript

Im Weblog von napyfab will die WM-Feierlaune nicht vorüber gehen. Nagut, als Italiener hat er ja auch allen Grund dazu … (wann hat schonmal ein Zweitliga-Team den Titel geholt? :D) … neben dem bereits erwähnten Livesuche-Tutorial bin ich in dem Blog, neben allen Fanwimpeln und WM-Fotos, aber auch noch auf ein Skript aufmerksam geworden: Reflections.js versieht Bilder mit einem durchaus hochglänzendem Spiegelungseffekt. Sehr edel das. (auch eine Beispiel-Seite und eine Live-Demo gibts es).
Einziger Wermutstropfen ist, dass im Opera 8.x weder das Originalbild noch die Spiegelung zu sehen ist. Im Opera 9 solls aber funktionieren. Dass der Effekt aber auch in älteren Versionen sauber herunterstuft wäre für mich allerdings schon ein Muss.

Muss es immer gleich Javascript sein?

Nicht bei jedem Bild sieht sowas gut aus, und ist schnell mal “too much” oder “overdozed”…
Aber auch ohne Javascript lässt sich Bildern und Vorschaubildern ein wenig Effektleben und Glanz verpassen: mit CSS.

Ein wenig opacity gefällig?

Bevor es an den Glanz geht müssen wir uns mit “opacity” beschäftigen: Was lässt sich mit opacity anstellen? Opazität, die Eigenschaft durchscheinend zu sein, ist das Gegenteil von Transparenz. Wir erhöhen also die Transparenz indem man die Opazität herabsetzt: img {opacity:0.75;} (das Bild erscheint opak, es wird somit transparent).
Das ist zwar CSS3 (d.h. jeder CSS-Validator schlägt bei der Verwendung dieser Eigenschaft Alarm), das sollte einen aber nicht davon abhalten es zu verwenden. Leider wars das jetzt auch schon mit der einfachen CSS-Theorie. Wie so oft sieht es in der Praxis, Dank der vielen verschiedenen Süppchen, die die Browser-Hersteller kochen, etwas diffizieler aus.

Beispielseite 1:

Hovereffekt mit opacity

Nach meinem Wissen, gibt es aber in allen Browsern (Opera nur mit Umwegen - dazu später mehr) bis auf das Auslaufmodell “Internet Explorer/Mac”, einen Weg Transparenzen für Bilder umzusetzen.

Auf der Beispielseite kann man sich selbst ein Bild machen: Thumbnail-Galerie mit und ohne opacity-Hovereffekten.

Probleme mit den meisten Browsern lassen sich beheben: Damit es in allen Browsern klappt muss man leider zu proprietären Mitteln greifen:

1. Gecko-Browser (Firefox/Mozilla/Flock/Netscape/K-Meleon/etc.):
   konnten bis Ende letzten Jahres nichts mit opacity anfangen. Das proprietäre -moz-opacity erfüllte bis dato aber den gleichen Zweck. Inzwischen (bitte nicht nach der genauen Gecko-Version fragen) sind Firefox & Co. aber auf opacity gut zu sprechen, trotzdem sollte man auf -moz-opacity noch nicht verzichten - für ältere Versionen dieser Browser.
2. Internet Explorer 6/Win:
   opacity kennt er nicht, nutzt aber eine hauseigene Alpha-Blending Variante: filter:alpha(opacity=50);
3. Opera:
   Für den Opera Browser muss man sich etwas anderes einfallen lassen: hier braucht man ein angepaßtes bzw. erweitertes Markup, man muss also seinen html-Code anpassen. Dazu mehr in einem späteren Artikel.
4. Safari:
   hat keine Probleme mit opacity, die Version 1.1 soll aber auf -khtml-opacity bestehen.
5. Internet Explorer/Mac: stellt das nach meinem Wissen nicht dar. Hier wird aber ebenfalls der Workaround für Opera greifen. Beim IE/Mac zu beachten: Alpha-Transparenzen werden nur dann richtig dargestellt wenn background-repeat auf none gesetzt ist.

Am Ende käme also eine CSS-Regel heraus, die in etwa so aussieht:
img.opaque {
opacity:0.75;
filter:alpha(opacity=75);
moz-opacity:0.75;
-khtml-opacity:.75;
 }

Weil jede der einzelnen Regeln den selben Zweck - nur halt in unterschiedlichen Browsern - erfüllen soll, kann man das auch so einbinden, dass selbst der CSS-Validator zufrieden ist.

CSS:
<style type="text/css" media="screen">
a img.opaque {opacity: .75;}
a:hover img.opaque {opacity: .99;}
</style>
<!--[if lt IE 7]>
<style type="text/css" media="screen">
a img.opaque {filter:alpha(opacity=75);}
a:hover img.opaque {filter:alpha(opacity=100);}
</style><![endif]-->

Javascript:
if ((navigator.appName.indexOf('Netscape')+1)) {
document.write('<style type="text/css" media="screen">
a img.opaque { -moz-opacity: .5;}
a:hover img.opaque {-moz-opacity: .999;}
</style>');
}
Zur Erklärung: In der ersten <style>-Angabe legen wir fest, was alle Browser können sollten, bzw. es früher oder später wohl auch interpretieren werden: Standard-konformes CSS. Darauf folgt ein Conditional Comment, welches lediglich der Internet Explorer interpretiert (das ist zwar gegen den eigentlichen Sinn eines html-Kommentars - schließlich ist ein Kommentar für Notizen da und nicht um auszuführenden Code zu beherbergen - aber wer sich mal etwas mit Webdesign und insbesondere dem IE beschäftigt hat, weiss, dass es nur selten mit Logik zugeht). Die erste Zeile des Kommentars besagt, dass nur Versionen des IE kleiner Version 7 den Kommentar verarbeiten sollen. Dann kommt der erwähnte Alpha-Blending-Filter und wir schließen das Kommentar schnell wieder, ohne weiter darüber nachzudenken… Anstelle der <style>-Elemente kann man natürlich auch auf externe CSS-Dateien ver<link>en.
Das Javascript macht nichts anderes, als für Gecko-Browser ein weiteres <style>-Element in das Dokument zu schreiben, ohne aber unser Stylesheet beim Validator-Test durchrasseln zu lassen. Reine Kosmetik für CSS-Fetischisten also… ;)

HeY! Wo bleibt der Glanz?

Von der Opacity zum Glanz ist es jetzt nur noch ein kleiner Schritt. Bei den transparent gemachten Bildern scheint die Hintergrundfarbe durch. Auch wenn dieser Hovereffekt schonmal ganz nett aussieht, hab ich mir überlegt, wie man dem blassen Aussehen und dem Sättigungsverlust entgegenwirken kann. Herausgekommen ist ein Hintergrundbild welches man dem Link zuweist. Je nach aktueller Transparenz überlagert das eigentliche Bild dieses Hintergrundbild unterschiedlich stark - mit dem Effekt, dass ein leichtes glänzen durchschimmert.
. Am besten eignet sich der Effekt wohl für Thumbnail-Ansichten in Bildergalerien, wo man sich natürlich entsprechend der Thumbnailgröße oder dem gewünschten Effekt ein eigenes Hintergrundbild für die transparenten Thumbnails getsalten wird.
Mit der Zeile a {background:url(thumb-bg.jpg) no-repeat 50% 50%;} weist man das Bild dem Link zu … fertig!

Beispielseite 2:

Hovereffekt mit opacity und Hintergrundbild

getestet mit folgenden Browsern:

• Opera nicht ohne Markup-Trickserei zu realisieren (mehr dazu später in einem eigenen Artikel)
• Internet Explorer/Mac mir kein Weg bekannt
• Internet Explorer 6 mit Active X Transition-Filtern machbar
• Netscape Navigator (den übrigens kein Mensch braucht) ohne Probleme
• Firefox ohne Probleme
• Flock ebenfalls ohne Probleme
• K-Meleon ebenfalls ohne Probleme
• Safari ohne Probleme

beide Techniken zusammen

Um dem ganzen jetzt noch die funkelnde Glossy-overdose-Krone aufzusetzen: kombinieren wir doch mal beide Techniken miteinander…

Ausblick, Alternativen, Ideen und weiterführender Lesestoff zum Thema

Mit ein wenig CSS-rumgepfriemel und einem Hintergrundbild lassen sich also Bilder oder Thumbnail-Seiten in den meisten Browsern mit einem Glanzeffekt versehen.
Leider ist die opacity-Eigenschaft nur mit viel Detailarbeit und proprietärem Gedöns “Cross-Browser-” und “Plattform-übergreifend” zu nutzen.
Nachteile: Der Sättigungsverlust, die leichte Verfärbung der Bilder ist mit zunehmender Transparenz deutlich zu erkennen und nicht immer schön anzusehen.
Vorteile: Wie auch bei der Javascript-Geschichte mit dem Reflections.js, belässt man die Bilder in unverändertem Originalzustand und bleibt somit flexibel. Wenn man diese Effekte nun kombiniert hat man eine Unmenge an Gestaltungsmöglichkeiten. Man denke nur an Prototype oder moo.fx …

Schlagworte: Code, Design, Javascript, stylesheet, thumbnail, vorschaubild

Dieser Beitrag wurde vor am Montag, 31. Juli 2006 um 6:13 pm Uhr veröffentlicht und unter CSS, Webwork gespeichert. Sie können Kommentare zu diesem Eintrag über den RSS-2.0-Feed verfolgen. Sie können einen Kommentar hinterlassen oder einen Trackback von Ihrer Website hierher setzen.