Coding: DHTML/Durchsichtige Elemente (Transparenz/Opacity/Überblendung)

Coding-Schatzkästlein
Kleine Tips & Scripts zum Webdesign
Start > DHTML > Durchsichtige Elemente

DHTML: Durchsichtige Elemente (Transparenz/Opacity/Überblendung)


		Zusammenfassung
		Name:	Transparency
		Aufgabe:	Sorgt (z.Zt.) auf IE (ab Version 5), Mozilla, KHTML/WebKit-Browsern (Konqueror, Safari) und generell auf CSS-3-Browsern für die transparente Darstellung von HTML-Elementen. Die Auswahl kann direkt über ein Objekt, über das ID-Attribut, das NAME-Attribut oder ein HTML-Tag erfolgen.
		Benötigt:	JavaScript 1.5 (gesichert, nicht gesichert für JavaScript 1.0)
		Beispiel:	`transparency("img",40)` `transparency("Bild1",60)` `transparency(images[1])`
		Download:	transobj.zip

Der Internet Explorer (mit seiner Funktion filter:Alpha), die Browser mit Mozilla- (mit seiner eigenen CSS-Definition -moz-opacity) und KHTML/WebKit-Engine (mit dem ebenfalls proprietären CSS -khtml-opacity) als auch Browser die CSS Version 3 (opacity) unterstützen erlauben es, HTML-Elemente teiltransparent darzustellen, also den Hintergrund durchscheinen zu lassen. Die hier vorgestellte Funktion transparency() erledigt dies systemübergreifend für ein einzelnes Element, aber auch für eine große Anzahl an Elementen (auf Browsern, die keine der Möglichkeiten unterstützen, passiert nichts). Die Funktion erwartet einen Parameter, mit dem das/die gewünschte(n) Element(e) halb durchscheinend gemacht werden. Die Art dieses Parameters bestimmt die Menge der bearbeiteten Elemente. Übergeben werden kann:

Ein JavaScript-HTML-Objekt: Es wird genau dieses Element bearbeitet.
Der Name eines HTML-Elementes: Es werden alle Elemente mit dem passenden Namen bearbeitet (NAME-Attribut - sofern beim Element zulässig).
Die ID eines HTML-Elementes: Es wird das Element mit der passenden ID bearbeitet (ID-Attribut).
Ein HTML-Tagname: Es werden alle passenden HTML-Elemente bearbeitet.

Optional kann in einem zweiten Parameter der Grad der Transparenz in Prozent von 0 (keine Transparenz) bis 100 (volle Transparenz - Element ist nicht sichtbar) eingestellt werden.

	Objekt-Auswahl: onMouseOver="transparency(this,0);"
	Transparenz-Beispiele voreingestellt sind 30% Transparenz
IMG-Tag- Auswahl
100%
90%
80%
70%
60%
50%
40%
30%
20%
10%
0%
transparency ("img",proz)
	"Ab18" (ID)	"Ab32" (ID)	"Ab56" (ID)	"FSK" (NAME)	"FVK" (NAME)
	ID-Attribut-Auswahl: transparency(id,60)			NAME-Attribut-Auswahl: transparency(name,60);

HTML-Code

<html>
<head>
<title>Transparenz-Beispiel</title>
<script type="text/javascript" language="JavaScript"><!--
 // Transparenz-Funktion mit lokaler 'Dummy'-Funktion und 'xJStrans'
 // geklammert, falls externes Script nicht geladen werden konnte!
 xJStrans=false; function t(e,p){if(xJStrans){transparency(e,p);}}
//--></script>
<script type="text/javascript" language="JavaScript" src="transobj.js"></script>
</head>

<body>

<p>
Parameter-Typen:<ol>
<li>Objekt (z.B. document.images["FSK"] / document.images[1] / this - mit 50% Transparenz)<br>
 <img src="sign18.gif" id="Ab18" name="FSK" onMouseOver="t(document.images['FSK']);" onMouseOut="t(document.images['FSK'],0);" width="125" height="125" alt="" border="0">
 <img src="sign32.gif" id="Ab32" name="FVK" onMouseOver="t(document.images[1]);" onMouseOut="t(document.images[1],0);" width="125" height="125" alt="" border="0">
 <img src="sign56.gif" id="Ab56" name="FVK" onMouseOver="t(this);" onMouseOut="t(this,0);" width="125" height="125" alt="" border="0">
</li>

<li>HTML-Tagnames (z.B "img" - mit 30% Transparenz):<br>
 <span onMouseOver="t('img',30);" onMouseOut="t('img',0);"><b>Alle Images</b></span>
</li>

<li>NAME-Attribut (z.B. "FVK" - mit 40% Transparenz):<br>
 <span onMouseOver="t('FVK',40);" onMouseOut="t('FVK',0);"><b>Alle Images mit NAME="FVK"</b></span>
</li>

<li>ID-Attribut (z.B. "Ab32" - mit 60% Transparenz):<br>
 <span onMouseOver="t('Ab32',60);" onMouseOut="t('Ab32',0);"><b>Image mit der ID="Ab32"</b></span>
</li>
</p>

</body>
</html>

Achtung: Wenn beim Internet Explorer bis einschließlich Version 7 ein HTML-Element nicht transparent wird, obwohl die Transparenz nicht deaktiviert wurde (s. unten), dann fehlt dem Element die Eigenschaft hasLayout (s. Über hasLayout) - ein steter Quell für Anzeigefehler. Dies betrifft aber (natürlich) nicht jedes Element ohne Layout-Eigenschaft (das wäre sonst ja logisch, und damit kein guter Microsoft-Stil). Beispiele: IMGs haben ein Layout -> keine Probleme. Ps haben kein Layout -> keine Transparenz. H1s haben ebenfalls kein Layout -> Transparenz (filter:Alpha) wird dennoch dargestellt, aber andere Filter (z.B. filter:Shadow) nicht.
Lösung: Man setzt bei diesem Element die Layout-Eigenschaft. Da das aber nicht direkt geht (hasLayout ist sinnigerweise nur auslesbar), muß man dem Element einen Stil zuweisen, der es in den Layout-Modus setzt. Es bietet sich hier die CSS-Eigenschaft zoom an, die auf 1 gesetzt, keine Änderungen am Layout verursacht.
Beispiele, um bei <p id="absatz"> die Layout-Eigenschaft zu setzen:
JS: document.getElementById("absatz").style.zoom="1";
CSS: #absatz { zoom:1; }

Als weiteres Beispiel die Funktion imgBlend(), mit der man browserübergreifend Bilder ineinander überblenden kann. Als Beispiel dienen wieder die drei Grafiken, die wechselweise überblendet werden, wenn man die Maus auf die Grafik bewegt (die Funktion könnte natürlich auch z.B. bei einem Klick beginnen, oder direkt aufgerufen werden). Wird die Maus wegbewegt, so wird eine laufende Überblendung sofort beendet, und das neue Bild sofort deckend eingeblendet. Sollte der Browser keine Transparenz beherrschen, wird ebenfalls sofort die neue Grafik sichtbar (allerdings läuft die Routine im Hintergrund weiter). Natürlich lassen sich so auch andere HTML-Elemente überblenden. Allerdings ist das Beispiel explizit auf Grafiken ausgelegt - die zu überblendende Grafik wird "einfach" zentriert in den Hintergrund des Elternelements des IMGs "verbannt", davon ausgehend, daß Grafiken gleicher Größe überblendet werden sollen. Sollen andere HTML-Elemente überblendet werden, so müssen diese mit CSS übereinander gelegt werden (mittels position und z-index).

Die Überblend-Funktion imgBlend() erwartet dabei folgende Parameter:

Das Image-Objekt (z.B. document.getElementById("blending") oder document.images["blending"]) der Grafik, die überblendet werden soll.
Den URL einer neuen Grafik (z.B. img/neu.gif), zu der übergeblendet werden soll.
Optional: Die Schrittweite der Transparenzwerte (voreingestellt: 4 - also für Überblendung mit den Transparenzwerten 100, 96, 92, ..., 8, 4, 0).
Optional: Die Wartezeit bis zum nächsten Wechsel der Transparenz in Millisekunden (voreingestellt: 30).
Optional: Ein Funktionsobjekt. Hiermit kann eine Funktion bestimmt werden, die nach dem Ende der Überblendung aufgerufen wird. Als erstem und einzigen Parameter wird dieser Funktion das Image-Objekt übergeben.

Zum Überblenden Maus über die Grafik bewegen!
Überblendungsbeispiel mit 3 Grafiken

Maus außerhalb der Grafik: Abbruch!

HTML-Code

<html>
<head>
<title>&Uuml;berblend-Beispiel/Fade in &uuml;ber bestehendes Bild</title>
<script type="text/javascript" language="JavaScript"><!--
 // Transparenz-Funktion mit lokaler 'Dummy'-Funktion und 'xJStrans'
 // geklammert, falls externes Script nicht geladen werden konnte!
 xJStrans=false; function t(e,p){if(xJStrans){transparency(e,p);}}

 // Ueberblendungsfunktion - Beispiel fuer transparency(): http://Coding.binon.net/Transparenz
 // Parameter: Image-Objekt, neuer Image-URL, Transparenzschritt (optional - Default: 4),
 //            Wartezeit zw. den Schritten (in ms - optional - Default: 20ms),
 //            Funktion die nach der Ueberblendung aufgerufen wird (optional)
 function imgBlend(imgObj,imgURL,step,time,onBlend) {

  // Wenn Aufruf mit neuem Image-URL als Parameter und keine Ueberblendung laeuft: Initialisierungszweig der Funktion
  if(imgURL && !imgObj.blendTrans) {
   // Image-Eigenschaft um Ueberblendung abzubrechen
   imgObj.blendStop=false;
   // Image-Eigenschaft mit aktuellem Transparenzwert (100 = voll transparent, 0 = deckend)
   imgObj.blendTrans=100;
   // Image-Eigenschaft mit der Schrittweite
   imgObj.blendStep=(step)?step:4;
   // Image-Eigenschaft mit der Zeitspanne (in ms) bis zum naechsten Schritt
   imgObj.blendTime=(time)?time:30;
   // Image-Eigenschaft mit der abschliessend aufzurufenden Funktion
   if(onBlend) { imgObj.onBlend=onBlend; }
   // Grafik als zentrierte Hintergrundgrafik des Elternobjektes verwenden 
   imgObj.parentNode.style.background="url("+imgObj.src+") no-repeat center";
   // Grafik voll transparent machen
   t(imgObj,imgObj.blendTrans);
   // Neue Grafik laden
   imgObj.src=imgURL;
   // Funktion erneut (aber ohne Image-URL) aufrufen
   setTimeout(function() { imgBlend(imgObj); },imgObj.blendTime);

  // Wenn Aufruf ohne neuen Image-URL: Ueberblendungszweig der Funktion
  } else if(!imgURL) {
   // Neuen Transparenzwert berechnen (nicht kleiner 0)
   imgObj.blendTrans=Math.max(0,imgObj.blendTrans-imgObj.blendStep);
   // Wenn Grafik immer noch transparent und Ueberblendung nicht abgebrochen:
   if(imgObj.blendTrans>0 && !imgObj.blendStop) {

    // Neuen Transparenzwert setzen
    t(imgObj,imgObj.blendTrans);
    // Und erneuter Funktionsaufruf fuer naechsten Schritt
    setTimeout(function() { imgBlend(imgObj); },imgObj.blendTime);

   // Wenn Grafik nicht mehr transparent (Ende der Ueberblendung) oder Abbruch 
   } else {
    // Aktueller Transparenzwert ist 0
    imgObj.blendTrans=0;
    // Transparenzwert 0 setzen
    t(imgObj,0);
    // Alte (Hintergrund-)Grafik loeschen
    imgObj.parentNode.style.backgroundImage="";
    // Sofern gewuenscht: Abschlussfunktion (mit Image-Objekt als Parameter) aufrufen
    if(imgObj.onBlend) { onBlend=imgObj.onBlend; imgObj.onBlend=null; onBlend(imgObj); }
   }

  }

 }

 // Abschlussfunktion (wird nach der Ueberblendung aufgerufen)
 function nextImage(imgObj) {
  // Falls aktuelle Grafik "Ab 32":
  if(imgObj.src.indexOf('img/sign32.gif')>=0) {
   // ALT_Attribut setzen
   imgObj.alt="FVK 'Ab 32'";
   // Eventhandler der Grafik setzen, damit beim naechsten Mal auf "Ab 56" ueberblendet wird
   imgObj.onmouseover=function() { imgBlend(this,'img/sign56.gif',4,30,nextImage); }

  // Falls aktuelle Grafik "Ab 56":
  } else if(imgObj.src.indexOf('img/sign56.gif')>=0) {
   imgObj.alt="FVK 'Ab 56'";
   // Naechste Grafik ist "Ab 18"
   imgObj.onmouseover=function() { imgBlend(this,'img/sign18.gif',4,30,nextImage); }

  // Ansonsten ist die "Ab 18"-Grafik aktuell:
  } else {
   imgObj.alt="FSK 'Ab 18'";
   // Nachste Grafik ist "Ab 32"
   imgObj.onmouseover=function() { imgBlend(this,'img/sign32.gif',4,30,nextImage); }
  }

 }

 // Grafik-Preload
 if(document.images) {
  i=-1; cache=new Array();
  i++; cache[i]=new Image(); cache[i].src="img/sign32.gif";
  i++; cache[i]=new Image(); cache[i].src="img/sign56.gif";
 }
//--></script>
<script type="text/javascript" language="JavaScript" src="transobj.js"></script>
</head>

<body>

<div>&Uuml;berblendung von 3 Grafiken - bitte Maus &uuml;ber die Grafik bewegen:<br><br>
 <div align="center">
  <!-- "Ab 18"-Grafik wird beim MouseOver ueberblendet mit "Ab 32"-Grafik; beim MouseOut wird die Ueberblendung abgebrochen -->
  <div style="width:125px;"><img src="img/sign18.gif" width="125" height="125" alt="FSK 'Ab 18'" title="" border="0" onMouseOver="imgBlend(this,'img/sign32.gif',4,30,nextImage);" onMouseOut="this.blendStop=true;"></div>
 </div>
 <br>Maus au&szlig;erhalb der Grafik: Abbruch der &Uuml;berblendung!
</div>

</body>
</html>

Der externe Quellcode: transobj.zip

Anmerkung: Da transparency() die Transparenzeffekte mit CSS setzt (beim IE wäre auch die direkte Programmierung des Filters möglich), ist keine Abfrage auf die tatsächlichen Browser-Eigenschaften erforderlich. Die unterschiedlichen Transparenz-Stile können vielmehr alle gleichzeitig gesetzt werden, da CSS per definitionem (außer in Inline-Styles) unbekannte Eigenschaften ignoriert (wie auch HTML-Browser unbekannte Tags zu ignorieren haben - s. Know-how).

Achtung: Während ältere Versionen des Konquerors (3.1+) die Transparenz mit dem proprietären -khtml-opacity und spätere Versionen gar mit dem offiziellen opacity unterstützen, wurde diese Unterstützung in der KHTML-Engine 3.4 leider wieder entfernt (aktuelles Konqueror-CSS - spätestens die neue KHTML-Engine 4 wird diesen Fehler beheben)! Ob die jeweilige Konqueror-Version Transparenz unterstützt, kann man feststellen, indem man ein (Test-)Element teiltransparent macht (als Wert z.B. 0.5) und den aktuellen Wert mittels getComputedStyle() wieder ausliest. Bei Versionen ohne Transparenz erhält man nicht den eingestellten Wert, sondern entweder 0 oder 1. WebKit, der Safari-Zweig der KHTML-Engine, ist davon nicht betroffen.

Aber auch beim Internet Explorer kann man nicht sicher sein, ob die Transparenz funktioniert. Ab IE 6/SP2 gibt es die Einstellungsoption "Binär- und Skriptverhalten", deren Deaktivierung die Filter abschaltet. Zwar kann man beim IE mit currentStyle (dem proprietären Gegenstück zum offiziellen getComputedStyle()) den aktuell verwendeten CSS-Stil ermitteln, aber das ist dann fälschlicherweise der gesetzte Transparenzwert, und nicht der tatsächlich sichtbare. =:-/
Auch soll es Versionen geben, die die Transparenz bei ausgeschaltetem ActiveX nicht darstellen. Ich habe zwar schon recht viele verschiedene IE-Installationen gesehen und dies bei keiner bestätigen können, aber daß es sie gibt, wurde mir glaubhaft versichert.

Hinweis: Mit der umfangreichen Funktion toggle() können ebenfalls HTML-Elemente transparent gemacht werden. Der Schwerpunkt liegt dabei jedoch auf dem gezielten Darstellungswechsel (nicht nur der Transparenz) einer Vielzahl von HTML-Elementen, während der Schwerpunkt des deutlich kompakteren transparency() auf der Darstellung insbesondere von Bildern und Bild-Gruppen liegt. Es ist aber abzusehen, daß toggle() früher oder später auch sämtliche Funktionalität von transparency() besitzen wird, welches dann möglicherweise überflüssig geworden ist. Ggf. wird dann der Link auf diese Seite, ebenso wie auch die Funktion selbst, gelöscht werden (das werde ich entscheiden, wenn es soweit ist - bin aber auch via E-Mail beeinflußbar ;-)), die Seite selbst wird aber auf jeden Fall erhalten bleiben - dann mindestens mit einer "Brücken-Funktion", die die Aufrufe von transparency() auf das dann kompatible toggle() umbilden wird.

Updates:

09.05.2007:	Korrektur: Im Download-Script (nicht in der intern von dieser Website benutzen Version) war ein Schreibfehler in der Routine für alte Versionen der KHTML-Engine (mit Dank an Frank für den Hinweis). Bei der Gelegenheit noch ein wenig den Code optimiert ...
08.10.2005:	Erweiterung: Unterstützt nun auch den proprietären Code der Browser mit KHTML-Engine (Konqueror, Safari).
21.06.2004:	Erweiterung: Die Funktion unterstützt jetzt auch die Transparenz von CSS Version 3.

Kurz-URL dieses Artikels: http://Coding.binon.net/Transparenz

Coding-SchatzkästleinKleine Tips & Scripts zum Webdesign Start > DHTML > Durchsichtige Elemente

DHTML: Durchsichtige Elemente (Transparenz/Opacity/Überblendung)

Coding-Schatzkästlein
Kleine Tips & Scripts zum Webdesign
Start > DHTML > Durchsichtige Elemente