PNGs mit Alphakanal im IE6 nutzen
PNGs bieten den ungeheuren Vorteil, richtige Alphakanäle auf Websites nutzen zu können. Mozilla/Firefox und der IE7 unterstützen Transparenz bei PNGs nativ, der IE6 lässt sich mit Hilfe des AlphaImageLoader-Filters von Microsoft dazu bringen, Transparenz entsprechend darzustellen.
Aber der IE6 wäre nicht der IE6, wenn es da nicht irgendeinen Haken gäbe, richtig?
Genauer gesagt gibt es sogar mehrere Haken:
- AlphaImageLoader funktioniert nur im IE5.5 und IE6 auf Windows-Plattformen. Je nach Browser muss eine Fallunterscheidung getroffen werden
- Transparente PNGs können nicht gekachelt werden. Ein Einsatz als Hintergrundmuster fällt also aus.
- Der Filter behandelt PNGs nicht als Hintergrundbilder - selbst wenn man sich das eigentlich so vorstellt. Dieser Umstand macht das Positionieren von interaktiven Objekten - zum Beispiel Links - etwas schwierig.
Trotz dieser Einschränkungen lässt sich mit transparenten PNGs im IE6 doch noch einiges zaubern. Man muss nur wissen wie:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Look Ma, Transparency!</title> <style type="text/css"> body { background-image:url('holes.gif'); margin:0px; padding:0px; } #mybox { position: absolute; left: 50px; top: 50px; width: 376px; height: 376px; background-image: url('box.png'); background-repeat: no-repeat; padding: 20px; } </style> <!--[if lt IE 7]> <style type="text/css"> #mybox { background-image:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( src='box.png',sizingMethod='crop') } </style> <![endif]--> </head> <body> <div id="mybox"> Look Ma, Transparency! </div> </body> </html> |
Der interessante Teil ist der, der in dem Conditional Comment steht:
- Wir überschreiben die background-image Information mit “none”. Gefilterte PNGs sind für den IE6 keine Hintergrundbilder - er würde also beide PNGs übereinander anzeigen: das gefilterte und das ungefilterte.
- Wir geben dem DIV die Filtereigenschaft mit. Als Quelle geben wir unser transparentes PNG an. Zusätzlich geben wir dem Filter sizingMethod=’crop’ mit auf den Weg: Sollte das PNG größer als der DIV-Container sein, wird der Rest des Bildes abgeschnitten. Neben ‘crop’ gibt es noch ’scale’, welches das PNG auf die Größe des DIVs skaliert und ‘image’, welches das DIV auf die Größe des PNGs skaliert.
Das sieht doch schonmal ganz gut aus. Aber was passiert, wenn wir einen Link in unsere Box einbauen wollen?
39 40 41 42 43 | <div id="mybox"> Look Ma, <a href="http://en.wikipedia.org/wiki/Transparency" target="_blank">Transparency!</a> </div> |
Der Link ist im IE6 nicht anklickbar. Schuld ist der Filter. Damit Links über transparenten PNGs funktionieren, gibt es zwei Dinge zu beachten:
- Das Element, auf das der AlphaImageLoader-Filter angewendet wird, darf keine “position”-Eigenschaft haben
- Die Links hingegen benötigen unbedingt eine “position”-Eigenschaft
Wir können also unser PNG-DIV nicht direkt positionieren, sonst funktionieren die Links nicht. Ist aber halb so wild, denn wir können das DIV in ein anderes DIV werfen, welches wir wiederum problemlos positionieren können. Zu diesem Zweck legen wir uns ein Container-DIV an und entfernen die Positionierungsinformationen aus unserem PNG-DIV:
13 14 15 16 17 18 19 20 21 22 23 24 25 | #container {
position: absolute;
left: 50px;
top: 50px;
}
#mybox {
width: 376px;
height: 376px;
background-image: url('box.png');
background-repeat: no-repeat;
padding: 20px;
} |
Zu guter Letzt positionieren wir den Link relativ:
25 26 27 | #mybox a {
position:relative;
} |
Der Aufruf unseres PNG-DIVs sieht dann folgendermaßen aus:
39 40 41 42 43 44 | <div id="container"> <div id="mybox"> Look Ma, <a href="http://en.wikipedia.org/wiki/Transparency" target="_blank">Transparency!</a> </div> </div> |
Fertig sieht das ganze dann so aus: transparency01.html
December 5th, 2007 at 22:35
[…] Falls du mit "IE" den IE6 meinst schau mal hier, hab ich neulich was zu geschrieben: Elbcoast Weblog » Blog Archive » PNGs mit Alphakanal im IE6 nutzen […]
December 25th, 2007 at 1:42
[…] PNG-Format wird nicht unterstützt. Ich machs immer so: http://www.elbcoast.net/?p=65 […]
January 9th, 2008 at 22:34
es funktioniert.. es funktioniert.. yupiiii
August 11th, 2008 at 14:06
[…] Das der IE6 keine transparenten PNGs kann sollte mittlerweile jeder wissen, das es dafür diverse CSS-Tricks gibt […]