Internet Explorer

Die Schattenseiten des Internet Explorers

(msc) Das PNG-Format hat gegenüber JPEG und GIF einen grossen Vorteil: Es unterstützt Alpha-Kanäle, d.h. stufenlose Transparenz. Während das JPEG-Format überhaupt keine Möglichkeit einräumt, den Hintergrund durchscheinen zu lassen, kann man in GIF-Bildern «durchsichtige» Farben definieren: Alle Partien des Bildes, die damit gefüllt sind, zeigen im Browser die Hintergrundfarbe – allerdings gibs im GIF-Bild nur komplett transparente Flächen, das Mischen von Bild und Hintergrund ist nicht möglich.

PNG-Bilder mit einem Alphakanal erlauben genau das. Der Alphakanal enthält für jeden Pixel eine Angabe, ob und wie stark der Hintergrund zu sehen ist. Damit ist es zum Beispiel möglich, dass Bilder Schlagschatten werfen: Eine tolle Möglichkeit für Webdesigner, edle Schaltflächen oder Schriftzüge zu gesalten.

Wäre da nicht ein lästiger Bug im Internet Explorer. Microsofts Browser zeigt die PNG-Transparenz falsch an: Durchsichtige Partien erscheinen grau überlagert – unbrauchbar. Keine Frage, ohne diesen fatalen Fehler wären PNG-Bilder längst viel zahlreicher im Internet anzutreffen.

Wer sich vom Internet Explorer nicht den Spass verderben lassen will, greift zu folgendem Trick: Über den AlphaImageLoader-Filter ist auch Microsofts Browser in der Lage, PNG-Bilder korrekt anzuzeigen. Er wird aufgerufen, wie Code-Beispiel 1 demonstriert. Selbstverständlich ist der AlphaImageLoader eine jener exklusiven Microsoft-Kreationen, mit der kein anderer Browser etwas anfangen kann. Er muss daher über ein kleines Script ausgeführt werden. Das als Code-Beispiel 2 gelistete JavaScript zeigt das Bild bei Internet Explorer 5.5 oder höher über den AlphaImageLoader und bei den anderen Browsern auf herkömmlichem Weg an. Im Internet Explorer 5 oder älter ist nichts zu sehen. Der Aufruf des Scripts erfolgt wie in Code-Beispiel 3 gezeigt. Sie brauchen den Code nicht abzutippen, er kann im Publisher-Online-Bereich heruntergeladen werden.

Dieses PNG wird über unten stehendes Script via AlphaImageLoader angezeigt.

Code-Beispiel 1 zeigt ein PNG-Bild im Internet Explorer mit Hilfe des AlphaImageLoader an. Die Spezifizierung von Höhe und Breite ist zwingend.

<html>
<head>
<!–[if gte IE 5.5000]>
<script language=»JavaScript»> var ie55up = true </script>
<![endif]–>
<script language=»JavaScript»>
function fixPNG(myImage) // correctly handle PNG transparency in Win IE 5.5 or higher.
{
if (window.ie55up)
{
var imgID = (myImage.id) ? «id='» + img.id + «‹ » : «»
var imgClass = (myImage.className) ? «class='» + myImage.className + «‹ » : «»
var imgTitle = (myImage.title) ? «title='» + myImage.title + «‹ » : «title='» + myImage.alt + «‹ »
var imgStyle = «display:inline-block;» + myImage.style.cssText
var strNewHTML = «<span » + imgID + imgClass + imgTitle
strNewHTML += » style=\»» + «width:» + myImage.width + «px; height:» + myImage.height + «px;» + imgStyle + «;»
strNewHTML += «filter:progid:DXImageTransform.Microsoft.AlphaImageLoader»
strNewHTML += «(src=\'» + myImage.src + «\›, sizingMethod=’scale›);\»></span>»
myImage.outerHTML = strNewHTML
}
}
</script>
</head>
<body bgcolor=»#fff6ca»>
<img src=»Transparenz-Demo.png» onload=»fixPNG(this)»>
<p>Mit PNG können Bilder auch Schlagschatten werfen…</p>
</body>
</html>

Code-Beispiel 2: Ein Modul mit Browserweiche für die Darstellung von PNG-Bildern.

Code-Beispiel 3: PNG-Bild über das Java-Script mit Browserweiche.

Die Schattenseiten des Internet Explorers

Related