PHP-Funktion um
PNG mit Tranparenz
in IE < 7 anzuzeigen

Mit einem PHP-Browsersniffer, der feststellt, ob man mit einem IE kleiner 7 angesurft kommt, kann man entscheiden, ob man nun einen einfachen Image-Tag möchte oder das aufwändige komplexe <span>-Tag um PNG mit Transparenz in den alten IEs darzustellen.

Streifen mit Transparenzverlauf

Fisch

Licht ... aus / an

Die Streifen sind ein PNG mit Alpha-Transparenz und der Fisch ist ein Gif. Entsprechend unterschiedlich bindet die kleine Funtkion diese Grafiken in alten Microsoft Internet Explorer vor der Version 7 ein.

Die Quelltext-Ausgabe im MSIE<6 sieht für diese beiden Bilder wie folgt aus:

  1. <p><span
  2. title="Streifen mit Transparenzverlauf"
  3. style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src= 'transparency-test.png',sizingMethod='scale');
  4. display: inline-block; width: 500px; height: 200px;"> </span></p>
  5. <p><img src="fish.gif" alt="Fisch" style="width: 220px; height: 81px;" /></p>

In Zeile 3 ist im Quelltext kein Umbruch. Dieser ist nur aufgrund der besseren Lesbarkeit hier eingeführt.

Im PHP-Script selbst ist die Angelegenheit ist erst einmal die Funktion vorhanden ein simple angelegenheit: <?php _img('Bilddateipfad','ALT-Text'); ?>. Also noch bequemer als ein <img ... />-Tag.

  1. <?php
  2. /*
  3. + Scriptfunktion: Transparente PNG-Grafiken im MSIE <7 darstellen
  4. +
  5. + Hinweis zum Gebrauch:
  6. + ==============================================
  7. + statt <img src="..." alt="..." />
  8. + nun <?php _img('Bilddateipfad','ALT-Text','Optionen', 'pngKeep'); ?>
  9. +
  10. + Unter Optionen sind Optionen wie Title Class Style Rel etc zu verstehen.
  11. + Höhe und Breite müssen nicht angegeben werden, diese werden vom Skript eingefügt
  12. + Gibt man Höhe und Breite an, so werden diese die von PHP ermittelten Maße überschreiben.
  13. + pngKeep kann true oder 1 bzw. false oder 0 lauten und dient dazu nicht transparente
  14. + PNGs auch im IE als Images und nicht als Hintergründe eines Spans einzugügen.
  15. +
  16. + Beispiel: <?php _img('images/mypic.png','My PNG','class="thickbox" rel="series" title="My PNG No X"', 'true'); ?>
  17. + oder: <?php _img('images/mypic.png','My PNG','',''); ?>
  18. + oder: <?php _img('images/mypic.gif','My GIF','title="It\'s a Gif"',''); ?>
  19. +
  20. */
  21.  
  22. function _img($imgFile, $imgAlt,$imgOpt,$pngKeep) {
  23.  
  24. //$slash = $html4==true ? '' : '/';
  25. $slash = '/';
  26.  
  27.  
  28. $imgOpt = $imgOpt != '' ? $imgOpt : '';
  29.  
  30. $imgFileExt = explode('.',$imgFile);
  31. $isPNG = strtolower($imgFileExt[1])=='png' ? 'true' : 'false';
  32.  
  33. $agent = $_SERVER['HTTP_USER_AGENT'];
  34.  
  35. // Win Internet Explorer 4.x, 5.x, 6.x,
  36. if( preg_match( "/Windows/i", $agent ) &&
  37. preg_match( "/msie/i", $agent ) &&
  38. preg_match( "/[4-6]\.[0-9]/i", $agent ) &&
  39. $isPNG == 'true'
  40. ) {
  41. $pngSpan = 'true';
  42. }
  43.  
  44. $imgSize = getimagesize($imgFile);
  45.  
  46. if($pngKeep == 'true' || $pngKeep == '1') {echo '<img src="'.$imgFile.'" alt="'.$imgAlt.'" width="'.$imgSize[0].'" height="'.$imgSize[1].'" '.$imgOpt.' '.$slash.'>';}
  47. else {
  48. if ($pngSpan==true){
  49.  
  50. echo '<!--[if IE]><span
  51. title="'.$imgAlt.'"
  52. style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src =\''.$imgFile.'\',sizingMethod=\'scale\');
  53. display: inline-block; width: '.$imgSize[0].'px; height: '.$imgSize[1].'px;">&nbsp;</span><![endif]-->
  54. <!--[if !IE]><!-->
  55. <img src="'.$imgFile.'" alt="'.$imgAlt.'" width="'.$imgSize[0].'" height="'.$imgSize[1].'" '.$imgOpt.' '.$slash.'>
  56. <!--<![endif]-->';
  57.  
  58. }
  59. else {
  60.  
  61. echo '<img src="'.$imgFile.'" alt="'.$imgAlt.'" width="'.$imgSize[0].'" height="'.$imgSize[1].'" '.$imgOpt.' '.$slash.'>';
  62.  
  63. }
  64. }
  65. }
  66. ?>

Link zur phps-Datei: _img.phps. (_img.phps liegt in der überarbeiteten Version vor. Opera-Browser die sich als IE ausgeben, werden nun durch den Conditional Comment versorgt und es kamen zusätzlich Optionen hinzu für Titel, Klassen und Rel, etc.)

Zurück zu ..