Einführung

Der Internet Explorer 6 macht bekanntlich Probleme wenn man versucht PNG Dateien mit Transparenz zu verwenden. Ein robuster JavaScript basierter Bugfix kann hier kostenfrei runter geladen werden (Medicine for your IE6/PNG headache! by Drew Diller). Folgendes TypoScript Snippet bindet die JavaScript Datei für den Bugfix ein, falls die Seite mit dem IE6 besucht wird. Anschließend wird eine CSS Klasse registriert mit deren Hilfe Bilder oder HTML-Elemente mit einem Hintergrundbild selektiert werden können.

// TypoScript, Setup
[browser = msie] && [version= <7]
 
  // include PNG-fix for IE6
  page.headerData.12 = TEXT
  page.headerData.12.value (
     <script src="{$pathToPNGFix}" 
       type="text/javascript"></script>
  )
 
  // add class to be fixed
  page.headerData.13 = TEXT
  page.headerData.13.value (
     <script type="text/javascript">
        DD_belatedPNG.fix('.pngFix');
     </script>
  )
 
[global]

Im Constants Feld wird jetzt noch der Pfad zu der JavaScript Datei hinterlegt.

// TypoScript, Constants
pathToPNGFix = fileadmin/myproject/script/pngfix.js

Nun werden Bilder die über die Klasse .pngFix verfügen auch in Internet Explorer 6 transparent dargestellt (vorausgesetzt JavaScript ist aktiviert).

<img src="images/myimage.png" class="pngFix" 
  alt="my image" />

Jetzt bookmarken: