Wie kann man PNG-Alphatransparenz im IE nutzen? 09. Juni 2007 um 18:02 Uhr / Webdesign

Eingestellt am 09. Juni 2007 um 18:02 Uhr » Webdesign

Vor zwei Jahren habe ich den durchaus erfolgreichen Artikel PNG - die Vorurteile und die Fakten geschrieben. Darin lege ich dar, dass man Alphatransparente PNGs in allen (aktuellen) Browsern nutzen kann, und dass nur der IE kleiner Version 7 eine Sonderbehandlung braucht. Ich legte aber nicht dar wie.

Das möchte ich heute nachholen. Dazu müssen wir uns eigentlich nur den IE 6 und IE 5.5 für Windows angucken. Der IE 5.0 für Windows kann überhaupt nicht mit der Alphatransparenz umgehen, er wird aber auch an sich kaum mehr benutzt. Und die hier vorgestellten Lösungen sind meiner Meinung nach das kleinste Übel. Dazu aber später mehr.

AlphaImageLoader Filter

Soweit ich es verstanden habe hatten die Jungs von Microsoft zwar schon eine Methode um alphatransparente PNGs in Ihrem Browser anzuzeigen zur Verfügung, aber damals nicht genügend Zeit um es sinnvoll zu implementieren. Deshalb konnte man alphatransparente PNGs nur über eine spezielle ActiveX-Komponente (eine Art Plugin) laden, die den Namen AlphaImageLoader trägt. Wenn man JavaScript im IE abschaltet wird auch ActiveX abgeschalten und somit funktioniert diese Methode nicht mehr. Was aber nichts ausmacht, da dann einfach das PNG mit der voreingestellten Hintergrundfarbe angezeigt wird.

Im IE läd man diese Komponente über die IE-eigene CSS-Eigenschaft filter:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop src='mypic.png')

Das ganze funktioniert im Prinzip genau so wie die CSS-Eigenschaft background-image: url(mypic.png), nur dass das Bild relativ zur aufgerufenen Seite gesucht wird anstatt relativ zur externen CSS-Datei. Man sollte deshalb die Pfade immer absolut angeben.

Hintergrundbilder

Für Hintergrundbilder ist das ja dann so kein Problem, bei mir sieht das dann in etwa so aus:

#foo { background: url(mypic.png) red; }
* html #foo {
 background-image: none;
 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop src='mypic.png')
}

Dabei gibt es folgendes zu beachten:

  • Man kann die Hintergrundbilder, die mit dem AlphaImageLoader geladen wurden nicht positionieren. D.h., dass man das nur da anwenden kann wo die Bilder oben links anfangen, oder der Hintergrund eine feste Größe hat, so dass man ein großes Bild reinmachen kann und das leere mit transparenz füllen kann.
  • Und im IE 5.0 wird dieses Hintergrundbild nicht angezeigt. Da wir aber Inhalte sowieso nicht im CSS transportieren macht das nichts, denn da wird es in einem alten Browser einfach nicht so gut dargestellt, das ist alles.
  • Das CSS wird dadurch invalide, ich lege solche Sachen in eine zusätzliche IE-Stylesheet-Datei, die ich mit Conditional-Comments einbinde.

Normale Bilder

Bei Bildern die Inhalte vermitteln und via <img src="myimg.png" alt="Blume"> eingebunden werden ist das ganze ein wenig schwieriger. Man muss das Bild wegmachen und es mit einem anderen Element ersetzen, das dann das Bild mit Hilfe des AlphaImageLoaders als Hintergundbild darstellt. Das Element benötigt natürlich auch die gleiche Größe wie das Bild und es müssen alle Attribute übertragen werden wie CSS-Klassen usw.

Da der AlphaImageLoader sowieso von JavaScript abhängig ist können wir die ganze Friemelarbeit auch gleich JavaScript selbst erledigen lassen. Glücklicherweise hat sich da vor einiger Zeit Bob Osola die Mühe gemacht und das Problem gelöst:

/*
 * Correctly handle PNG transparency in Win IE 5.5 & 6.
 * http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.
 * Use in <HEAD> with DEFER keyword wrapped in conditional comments:
 * <!--[if lt IE 7]>
 * <script defer type="text/javascript" src="pngfix.js"></script>
 * <![endif]-->
 */
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])

if ((version >= 5.5) && (document.body.filters)) 
{
   for(var i=0; i<document.images.length; i++)
   {
      var img = document.images[i]
      var imgName = img.src.toUpperCase()
      if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
      {
         var imgID = (img.id) ? "id='" + img.id + "' " : ""
         var imgClass = (img.className) ? "class='" + img.className + "' " : ""
         var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
         var imgStyle = "display:inline-block;" + img.style.cssText 
         if (img.align == "left") imgStyle = "float:left;" + imgStyle
         if (img.align == "right") imgStyle = "float:right;" + imgStyle
         if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
         var strNewHTML = "<span " + imgID + imgClass + imgTitle
         + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
         + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
         + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
         img.outerHTML = strNewHTML
         i = i-1
      }
   }
}

Wie oben im Kommentar angemerkt sollte man das JavaScript als externe JS-Datei so einbinden: <!--[if lt IE 7]><script defer type="text/javascript" src="pngfix.js"></script><![endif]-->

Durch das Attribut defer wird das JavaScript erst aufgerufen, wenn das HTML heruntergeladen wurde. Man sollte den Bildern aber height und width in HTML angeben, damit das JavaScript für das zu ersetzende <span> die richtige Höhe und Breite kalkulieren kann, auch schon bevor das eigentliche Bild geladen ist. Damit vermeidet man das Script erst bei onload aufrufen zu müssen und sichtbares Flackern zu bekommen.

Jetzt haben wir zwei einfache Methoden alphatransparente PNGs in allen heute benutzten Browsern mit kleinen Einschränkungen nutzen zu können. Eine für (nicht positionierte) Hintergrundbilder und eine für normale Bilder mit Inhalt.

Zusätzlicher Lesestoff

Pingbacks

  1. miese Gedanken » Transparente PNGs transparent
  2. PNG-Alphatransparenz im Internet Explorer » Peruns Weblog
  3. ovaler Button - Rand zu pixelig! - Photoshop @ tutorials.de: Forum, Tutorial, Anleitung, Schulung & Hilfe
  4. http://xhtmlforum.de/48267-png-und-ie6.html#post352105
  5. http://xhtmlforum.de/49503-halbtranzaprente-grafiken.html#post363538
  6. Wordpress Java scribt - Forum Fachinformatiker.de
  7. Layoutcheck - Sportverein - XHTMLforum

Kommentare

  Dein Kommentar 

Wie benutze ich BBcode?