Internet Explorer 6 unterstützt die Alpha-Transparenz des PNG-Grafikformats nicht von Haus aus. In diesem Leitfaden wird eine kodierte Lösung mit Javascript, CSS und HTML demonstriert.
Im August dieses Jahres ergab eine Umfrage von NetApplications.com, dass der IE6 immer noch der Browser der Wahl von über 25 % aller Internetnutzer ist. Das bedeutet, dass ein Webentwickler ernsthaft in Erwägung ziehen muss, Designfunktionen einzubauen, die im IE6 korrekt angezeigt werden können, oder er riskiert, ein Viertel der Besucher seiner Website zu verprellen.
Dies kann problematisch sein, wenn man eine Website auf ihre browserübergreifende Kompatibilität testet, denn eine der Hürden, auf die ein Webentwickler stoßen kann, ist die fehlende native Transparenzunterstützung für das PNG-Format im IE6.
Dieses Tutorial zeigt eine effektive Anleitung zur Überwindung der fehlenden .PNG-Transparenz im IE6 mit Javascript, CSS und HTML.
Was ist das .PNG-Format?
PNG (ausgesprochen “ping”) steht für Portable Network Graphics. Es handelt sich um ein Bildformat, das im Gegensatz zum JPG-Format eine verlustfreie Datenkomprimierung beinhaltet und – ebenfalls im Gegensatz zum JPG-Format – volle Alpha-Transparenz unterstützt. Das PNG-Format wurde entwickelt, um den begrenzten Bildtyp GIF zu ersetzen, und entwickelt sich schnell zum bevorzugten Grafikformat für die Darstellung von Bildern im Internet.
Was ist Alpha-Transparenz?
Traditionell wurde ein Pixel in einem Bild auf einer Webseite mit binärer Transparenz dargestellt. Das heißt, das Pixel war entweder völlig transparent oder völlig undurchsichtig. Dies ist die vom GIF-Dateiformat verwendete Transparenzstrategie.
Das PNG-Format verwendet “Alpha-Ebenen”. Dadurch können Teile des Bildes unterschiedliche Transparenzgrade aufweisen. Auf diese Weise kann beispielsweise ein Vordergrundbild auf einer Webseite, z. B. eine Link-Schaltfläche, das Hintergrundbild zwischen den Zwischenräumen im Schaltflächendesign anzeigen. Diese Alphatransparenzfunktion wird vom IE6 nicht unterstützt.
Der AlphaImageLoader-Filter
Der IE6 unterstützt zwar nicht von Haus aus Alpha-Imaging, aber seit dem IE4 verfügt der Browser über viele Filter, die nicht explizit vom Browser verwendet werden. Diese Filter sind jedoch über Code-Aufrufe zugänglich. Es ist der AlphaImageLoader-Filter, der es ermöglicht, Alphatransparenz im IE6 zu sehen.
Alpha-Transparenz im IE6 verwenden
Der erste Schritt zur Aktivierung transparenter Bilder im IE6 ist das Hinzufügen einer Javascript-Funktion in der Kopfzeile jeder HTML-Seite:
<script type=”text/javascript”>
var browserName=navigator.appName;
if (browserName==”Microsoft Internet Explorer”) {
document.write(‘<link href=”stylesieonly.css” rel=”stylesheet” type=”text/css”>’)
}
sonst {
document.write(‘<link href=”styles.css” rel=”stylesheet” type=”text/css”>’)
}
</script>
Dieses Skript testet den verwendeten Browsertyp. In diesem Beispiel wird, wenn der Browsertyp Internet Explorer ist, ein Cascading Stylesheet namens “stylesieonly.css” geladen. Bei anderen Browsern wird das Stylesheet “styles.css” verwendet. Damit diese Methode funktioniert, müssen also zwei Stylesheets erstellt werden: ein IE6-spezifisches Stylesheet, das einen Filteraufruf enthält, und ein allgemeines Stylesheet, das Bilder auf normale Weise ohne Filteraufruf anzeigt.
Kaskadierendes Stylesheet für Internet Explorer 6
In diesem Beispiel wird ein PNG-Bild mit Alphakanal verwendet, um eine Verknüpfungsschaltfläche mit Mouseover-Eigenschaften zu erstellen. Die CSS-Auszeichnung für das IE6-spezifische Stylesheet sieht wie folgt aus:
a.homelink{
Position: relativ;
Breite:60px;
Höhe:40px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’home.png’, sizingMethod=’scale’);
Anzeige:Block;
}
a.homelink:Hover{
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’homeover.png’, sizingMethod=’scale’);
}
Es handelt sich um eine ziemlich standardmäßige CSS-Klasse, die durch einen Aufruf des AlphaImageLoader-Filters ergänzt wird. Durch die Verwendung dieses Filters wird das PNG-Bild mit seinen intakten Alpha-Eigenschaften geladen, und wenn das Bild benötigt wird, kann diese CSS-Klasse aus dem HTML-Markup aufgerufen werden:
<a href=”index.html” class=”homelink” target=”_top” ></a>
Diese Kombination aus Javascript, CSS und HTML zeigt Alphatransparenz in PNG-Bildern im IE6 an, ohne die Interpretation des Website-HTML durch andere Browsertypen zu beeinträchtigen.
