Mehrere PNGs mit transparentem Alphakanal verwenden

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Sie wollen mehrere PNG-Dateien, die transparente Alphakanäle enthalten, in Ihre Seiten einbinden.

Lösung

Verwenden Sie das aktualisierte Sleight-Skript von Drew McLellan, um transparente Alphakanäle auch im Internet Explorer der Versionen 5.5 bis 6 verwenden zu können.

Sie können diesen Code in Ihrer eigenen JavaScript-Datei speichern oder ihn direkt von McLellans Website herunterladen.

if (navigator.platform == "Win32" &&
 navigator.appName == "Microsoft Internet Explorer" &&
 window.attachEvent) {
  window.attachEvent("onload", fnLoadPngs);
}

function fnLoadPngs( ) {
 var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, '');
 var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
 for (var i = document.all.length - 1, obj = null;
  (obj = document.all[i]); i--) {
  if (itsAllGood &&
 obj.currentStyle.backgroundImage.match(/\.png/i) != null) {
  this.fnFixPng(obj);
  obj.attachEvent("onpropertychange",
 this.fnPropertyChanged);
  }
 }
}

function fnPropertyChanged( ) {
 if (window.event.propertyName == "style.backgroundImage") {
  var el = window.event.srcElement;
  if (!el.currentStyle.backgroundImage.match(/x\.gif/i)) {
    var bg = el.currentStyle.backgroundImage;
    var src = bg.substring(5,bg.length-2);
    el.filters.item(0).src = src;
    el.style.backgroundImage = "url(x.gif)";
  }
 }
}
function fnFixPng(obj) {
 var bg = obj.currentStyle.backgroundImage;
 var src = bg.substring(5,bg.length-2);
 obj.style.filter =
"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"
 + src + "', sizingMethod='scale')";
 obj.style.backgroundImage = "url(x.gif)";
}

Binden Sie die JavaScript-Datei in die Webseite ein, indem Sie den folgenden Code in den head-Teil der Seite einfügen:

<script src="/_assets/js/bgsleight.js" type="text/javascript"></script>

Hinweis:
Vermutlich müssen Sie den Pfad zur JavaScipt-Datei für Ihre Situation anpassen. In unserem Beispiel liegt die Datei im Ordner js, der seinerseits im Ordner _assets gespeichert ist.

Zudem muss die 1-Pixel-große GIF-Datei (die im Skript als x.gif bezeichnet wird) auf Ihrem Webserver vorhanden sein, und der Pfad muss im Skript entsprechend angepasst werden.

Diskussion

Transparente Alphakanäle werden in modernen Browsern mittlerweile fast schon standardmäßig unterstützt. Browser mit nativer Unterstützung für PNG-Dateien sind beispielsweise Netscape Navigator 6+, erg.:Firefox 1.5+, Opera, Safari und Internet Explorer für Windows 7. Leider bietet der immer noch sehr häufig verwendete Internet Explorer 6 für Windows diese Unterstützung noch nicht.

Um dieses Problem zu umgehen, hat Aaron Boodman ein JavaScript erstellt, das die Microsoft-proprietäre Eigenschaft filter verwendet, damit auch Internet Explorer für Windows 5.5 bis 6 PNGs mit transparenten Alphakanälen unterstützen. Andere Browser, die PNGs nativ unterstützen, werden davon nicht berührt.

Drew McLellan verfeinerte die Methode von Boodman, sodass das JavaScript aus unserer Lösung nicht nur für in den HTML-Code eingebettete Bilder, sondern auch für Hintergrundbilder funktioniert (siehe Drew McLellan: Sleight of hand).

McLellans JavaScript wird beim Laden der Seite ausgeführt. Das Skript durchsucht den HTML-Quelltext nach img-Elementen, die auf Bilder mit der Dateiendung png verweisen.

Sobald der Code ein solches img-Tag findet, wird der HTML-Code dynamisch verändert. Im ersten Schritt wird das ursprüngliche PNG-Bild durch eine 1 Pixel große transparente GIF-Datei ersetzt.

Im nächsten Schritt wird die betreffende PNG-Datei mit der filter-Eigenschaft des Internet Explorers versehen, um die transparenten Alphakanäle im Browser nutzen zu können. Dies geht nur, indem das PNG als Hintergrundbild definiert wird.

Innerhalb der Webseite erscheint die PNG-Datei also als Hintergrundbild für das transparente GIF.

Hinweis:
Beim Erstellen Ihrer Seite sollten Sie unbedingt darauf achten, die Breite und die Höhe der PNG-Datei im CSS-Code mit den Eigenschaften width und height zu definieren. Ansonsten wird das Skript nicht korrekt ausgeführt.

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln