jQuery-Ansatz für transparente PNG Grafiken im Internet Explorer 6

Zugriffe: 3152 starstarstarstarstarstarstarstarstarstar Bewertung:2,67 (3 Bewertungen) 10.12.2008

Im Blog-Beitrag hatte ich einen jQuery-Ansatz aufgezeigt, wie man PNG-Grafiken im Internet Explorer < 7 transparent darstellen kann. Möglich wurde dies durch die Unterstützung des filter-Attributes.
Doch wie sieht das ganze aus, wenn man PNG-Hintergrundgrafiken einsetzt und diese zB einen transparenten Verlauf haben.
Hier könnte man wieder die scriptseitige Implementierung wählen:
 

<script type="text/javascript">
 $(document).ready(function() {
  if ($.browser.msie) {
   $(".transpPNG").each(function() {
   var img = this.currentStyle.backgroundImage.substr(5).replace("\")", "");
   $(this).css({ background: "none",
         filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+img+"', sizingMethod='scale')" });
   });
 }
} );
</script>

Hier wurde eine Selektion auf alle DIV-Elemente mit dem class-Attribute "transpPNG" vorgenommen und die filter-Eigenschaft gesetzt. Wichtig zu wissen ist dabei, dass die background-Eigenschaft auf 'none' gesetzt werden muss. Die Bild-Url wird dabei aus den aktuellen Css-Definitionen ermittelt.
Als jQuery-Erweiterung ergäbe sich dann folgender Code:
 

<script type="text/javascript"> 

 $(document).ready(function() {
 if ($.browser.msie) {
   $(".transpPNG").setTransparentBackground(); }
 });

$.fn.setTransparentBackground = function() {
 return this.each(function() {
  var img = this.currentStyle.backgroundImage.substr(5).replace("\")", "");
  $(this).css({ background: "none",
        filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+img+"', sizingMethod='scale')"
  });
 });
}
</script>

 


Neuen Kommentar verfassen

Bestätigungscode