Um Grafiken und Bilder in HTML-Dokumenten aufzuwerten, werden sie häufig mit einer Reflexion versehen. Das Orginalbild wird dazu vertikal gespiegelt und nach unten ausgefadet. Um derartiges Verhalten zu realisieren, kann das <canvas>-Element verwendet werden. Um dem Internet Explorer gerecht zu werden, kann hier das gleiche durch die Verwendung der filter-Eigenschaft umgesetzt werden.
Wird ein Bild mit der CSS-Eigenschaft display: none ausgezeichnet, wird nur dessen Reflexion angezeigt.
Script läuft jetzt auch im IE 8 fehlerfrei
Die Bilder wurden wie oben beschrieben durch ein JavaScript zunächst vertikal gespiegelt und anschliessend ausgefadet.
qpReflexion
)Wird ein Reflexionsobjekt erstellt, so kann dies mit einem optionalen Argument erfolgen. Dieses kann Reflexionsparemeter enthalten, welche die Länge der Spiegelung, sowie deren Start- und Endtransparenz konfigurieren.
objReflexion = new qpReflexion([objAttr])
Es kann ein Objekt mit maximal drei Eigenschaften (len, start, end) übergeben werden:
objAttr = {len: wert1, start: wert2, end: wert3}
Die Länge der Reflexion wird auf die Hälfte des Bildes (len: 0.5) festgelegt. Zu Beginn gibt es keine Transparenz (start: 1.0) und am Ende ist die Reflexion komplett transparenz (end: 0.0).
objReflexion = new qpReflexion({len: 0.5, start: 1.0, end: 0.0})
Um den obigen Effekt zu erreichen, sind nur wenige Schritte notwendig. Alle Bilder, die mit dem
Reflexionseffekt versehen werden, werden durch andere Elemente ersetzt. In IEs sind das
SPAN
-Konstrukte, in Browsern, die das <canvas>-Element kennen,
canvas-Container. Das hat zur Folge, dass bisherige CSS-Formatierungen eventuell nicht mehr greifen und
angepasst werden müssen. Um eine Möglichkeit zur Verfügung zu stellen, werden die Elemente mit der CSS-Klasse
refl-class ausgezeichnet.
Zunächst muss das notwendige JavaScript eingebunden werden. In komprimierter Form hat das Script lediglich eine Grösse von 4kB.
<!--[if IE]> <script type="text/javascript" src="qp_reflexion.js"></script> <![endif]-->
Bilder, die mit dem Reflexions-Effekt behandelt werden sollen, müssen in der Ausgangskonfiguration
mit dem Attribut rel
und dem Wert reflexion
ausgezeichnet werden.
<img src="bild.gif" rel="reflexion" />
Mit dem Instanziieren eine Reflexionsobjektes werden alle Bilder mit dem Reflexions-Effekt versehen, die mit dem in Punkt 2 beschriebenen Attribut ausgezeichnet wurden. Das Erstellen des Objekts muss erfolgen, wenn die Bilder geladen wurden. D.h. entweder im Dokument nach den Bildern die bearbeitet werden sollen oder im onload-Event.
window.onload = function(){ objReflexion = new qpReflexion(); }
Das Script bietet auch die Möglichkeit, Bildelemente manuell mit dem Reflexionseffekt
zu versehen. Hierfür steht die Methode Reflect
zur Verfügung.
qpReflexion.Reflect(objArg)
Dem Argument kann ein einzelnes Bildobjekt oder ein Array mit Bildobjekten übergeben werden.
// Einzelnes Bildobjekt objReflexion.Reflect(document.getElementById('bild1_id')); // Array aus Bildobjekten objReflexion.Reflect([document.getElementById('bild2_id'), document.getElementById('bild3_id')]);
Das Script bietet weiterhin die Möglichkeit, die Reflexion zu konfigurieren. So kann festgelegt werden, welche Start- und Endtransparenz das Spiegelbild haben soll und wie weit es gehen soll.
qpReflexion.setAttributes(objAttr)
Es kann ein Objekt mit maximal drei Eigenschaften (len, start, end) übergeben werden:
objAttr = {len: wert1, start: wert2, end: wert3}
Die Länge der Reflexion wird auf die Hälfte des Bildes (len: 0.5) festgelegt. Zu Beginn gibt es keine Transparenz (start: 1.0) und am Ende ist die Reflexion komplett transparenz (end: 0.0).
objReflexion.setAttributes({len: 0.5, start: 1.0, end: 0.0})
Die erweiterte Konfiguration wird nur erfahrenen Benutzern empfohlen, da hier direkter Eingriff in die Reflexions-Klasse nötig wird.
function qpReflexion(){ this.IDName = "reflexion"; // Name, der Bilder identifiziert, die reflektiert werden sollen this.AttrName = "rel"; // Attribut, in dem Bilder identifiziert werden this.ReflWidth = 0.8; // Wie weit soll Reflexion gehen 0.0 .. 1.0 this.StartOpac = 0.7; // Start-Transparenz (0.0 .. 1.0), 0=volle Transp., 1=keine Transp. this.EndOpac = 0.0; // End-Transparenz (0.0 .. 1.0), 0=volle Transp., 1=keine Transp. // Weitere Klassendefinitionen };
Hier können neben den bereits beschriebenen Attributen (Länge, Start- und Endtransparenz) auch festgelegt
werden, welches Attribut (this.AttrName
) und welcher Wert (this.IDName
) ausgewertet
werden soll, um die Bilder zu identifizieren, die mit einer Reflexion versehen werden sollen. Voreingestellt
sind hier rel und reflexion.
Die CSS-Eigenschaften, mit denen das Ausgangsbild ausgezeichnet ist, werden so weit wie möglich in das neue Element übernommen. Über die CSS-Klasse refl-class können verloren gegangene Eigenschaften wieder zugefügt werden.
Das folgende Bild wurde mit der CSS-Eigenschaft display: none
ausgezeichnet. Dieses
Vorgehen hat zur Folge, dass nur die Reflexion angezeigt wird.
Die nachstehende Liste hat keinen Anspruch auf Vollständigkeit. Vielmehr handelt es sich um eine Aufzählung der Programme, in denen das Script erfolgreich getestet werden konnte. Sollte die Routine auch in nicht aufgelisteten Browsern laufen, können mir die Namen sowie die Versionsnummer über die E-Mail-Adresse im Impressum zugesandt werden.