forum Sea of Sin / Startseite sitemap

Sea of Sin / Blog

Zentrum der Langeweile

Transparente PNG's mit dem Internet Explorer 6

2007/02/19 von de_henne
Da ich des öfteren angesprochen werde ob es möglich ist mit dem Internet Explorer 6 transparente PNG's anzuzeigen, erkläre ich einmal die Tricks.
Das ganze funktioniert natürlich mit CSS. Da der Internet Explorer 6 zurzeit noch der Standard Browser ist, ist dies ärgerlich wenn PNG's falsch dargestellt werden.
Die transparente PNG Unterstützung besitzt erst der IE7. Weshalb Microsoft damals nicht die PNG Unterstützung von Windows verwendet hat weis wohl nur Microsoft selber.

Um zum Thema zu kommen, es ist natürlich auch mit dem IE6 möglich, jedoch etwas umständlich.

Für den Internet Explorer gibt es als CSS Angabe

  1. progid:DXImageTransform.Microsoft.AlphaImageLoader(src='BILD_PFAD',
  2. sizingMethod='image')

 
sobald dies in ein Element gelegt wird, wird das PNG Bild richtig angezeigt.

  1. <span style=" progidgroßes Grinsen XImageTransform.Microsoft.AlphaImageLoader(src='MEIN_BILD', sizingMethod='image')">&amp;nbsp;</span>


Wäre jetzt natürlich extrem umständlich überall wo wir ein PNG Bild haben mit einem DIV oder SPAN zu ersetzen.

Damit das ganze automatisiert funktioniert gibt es hierfür auch schon fertige JavaScript Funktionen.
Auf http://homepage.ntlworld.com/bobosola/ gibt es ein automatisiertes Skript. Dieses beachtet leider nicht alle Attribute, Attribute wie align. Falls ein align im IMG Tag existiert wird es einfach nicht beachtet und daher gelöscht.
Kann ich natürlich nicht so stehen lassen also musste das Skript verbessert werden ;-)


Vorgehensweise:

Ladet euch als erstes meine verbesserte Version runter ( hier )
Hier werden Attribute beachtet wie onclick, onmouseover, onmouseout und align.
Damit dies automatisiert funktioniert muss lediglich im body Tag per onload auf die correctPNG() Funktion zugegriffen werden.

  1. <body onload="correctPNG()">


Natürlich muss das Skript auch im Header erscheinen.

  1. <script language="javascript" type="text/javascript" src="pngfix.js"></script>


Es werden nun alle PNG's gesucht und richtig dargestellt. Das Skript springt an, wenn der Browser sich als Internet Explorer zu erkennen gibt.

Zusätzlich habe ich auch eine Version geschrieben mit welcher ein einzelnes Bild übergeben werden kann ( hier ). Besser gesagt ein IMG Node. Wer sich nun jetzt nicht so extrem in JavaScript auskennt ….. auch nicht schlimm.

Vorgehensweise ist ähnlich.
Wieder wie oben die JavaScript Datei im Header definieren

  1. <script type="text/javascript" src="pngfix_one.js"></script>


Irgendwo auf einer HTML Seite gibt es nun ein PNG Bild.

  1. <img src="bild.png" />


Es gibt nun verschiedenen Möglichkeiten: 

Dem Bild wird eine ID zugewiesen und per document.getElementById('BILD_ID')  der correctPNG() Funktion übergeben. D.h.

  1. correctPNG(document.getElementById('BILD_ID'));

 
Eine andere Möglichkeit (direkt im Bild selber): 

  1. <img src="bild.png" onload="correctPNG(this)" />


Dies ist kein Standard aber es funktioniert mit dem Internet Explorer. Ich freu mich über eure Ideen, Verbesserungen und Anregungen.

Gruss henbug

 
  • Keine Kommentare