Seiteninhalt

• Reflexion (JS)
• Demonstration
• Reflexion (qpReflexion)
• Reflexion einbinden
• Manuelles Aufrufen
• Reflexion konfigurieren
• Erweiterte Konfiguration
• CSS-Eigenschaften
• Browserkompatibilität
• Anregungen und Verbesserungsvorschläge

Reflexion (JS)

Um Grafiken und Bilder 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.

Update [24.05.2009]: Script läuft nun auch im IE 8 fehlerfrei

• JavaScript (kommentiert, ca. 13kB)
• JavaScript (komprimiert, ca. 4kB)

Demonstration

Die Bilder wurden wie oben beschrieben durch ein JavaScript zunächst vertikal gespiegelt und anschliessend ausgefadet.

Reflexion (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)

Parameter

• objAttr (optional)
  Es kann ein Objekt mit maximal drei Eigenschaften (len, start, end) übergeben werden:
  objAttr = {len: wert1, start: wert2, end: wert3}
   
  • len - Länge der Reflexion (wert1 = 0.0 bis 1.0)
  • start - Transparenz am Anfang der Reflexion (wert2 = 0.0 bis 1.0)
  • end - Transparenz am Ende der Reflexion (wert3 = 0.0 bis 1.0)
   

Beispiel

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})

Reflexion einbinden

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.

1. Script einbinden

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]-->

2. Bilder auszeichnen

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" />

3. Objekt instanziieren

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();
}
 

Manuelles Aufrufen

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)
          

Parameter

• objArg
  Dem Argument kann ein einzelnes Bildobjekt oder ein Array mit Bildobjekten übergeben werden.
   

Beispiel

// Einzelnes Bildobjekt
objReflexion.Reflect(document.getElementById('bild1_id'));

// Array aus Bildobjekten
objReflexion.Reflect([document.getElementById('bild2_id'),
                      document.getElementById('bild3_id')]);

Einzelnes Bildobjekt (Bild anklicken)

Array mit Bildobjekten [Klick!]

Reflexion konfigurieren

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)

Parameter

• objAttr (optional)
  Es kann ein Objekt mit maximal drei Eigenschaften (len, start, end) übergeben werden:
  objAttr = {len: wert1, start: wert2, end: wert3}
   
  • len - Länge der Reflexion (wert1 = 0.0 bis 1.0)
  • start - Transparenz am Anfang der Reflexion (wert2 = 0.0 bis 1.0)
  • end - Transparenz am Ende der Reflexion (wert3 = 0.0 bis 1.0)
   

Beispiel

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})

Attribute setzen (Bild anklicken)

Erweiterte Konfiguration

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.

Vorhandene CSS-Eigenschaften

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.

Browserkompatibilität

Das Script wurde in folgenden Browsern erfolgreich getestet.

• Firefox 1.5+
• Seamonkey
• IE 5.5+
• Opera 9+
• Safari 3.0 (Win)

Anregungen und Verbesserungsvorschläge

Anregungen und Verbeserungsvorschläge können gerne hier gepostet werden. Selbstverständlich steht dafür auch das Kontaktformular zur Verfügung.

Foto: aboutpixel.de | werlinfri