Wenn man PNG-Grafiken im Internet einsetzt, dann kommt man insbesondere beim Internet Explorer 6 an einem Problem an, nämlich dass dieser Browser die Transparenz der PNG-Grafiken nicht richtig darstellen kann.
Zur Lösung dieses Problems gibt es im Netz schon diverse Lösungen, wobei mir diese hier am meisten zusagt. Leider berücksichtigt diese Lösung nicht alle Attribute des Bildelementes und auch nicht mögliche Events.
Zu guter Letzt bleibt der Ansatz, den jQuery verfolgt hier unberücksichtigt. Der folgende Codeausschnitt nimmt sich diesem Problem an:
<script type="text/javascript">
$(document).ready(function(e){
$("img[src$='png']").each(function(e){
if(!$.browser.msie){
return;
}else if(parseInt($.browser.version) != 6){
return;
}
var div = $("<div />");
for(var n in this.attributes){
if(this[n] != "" && this[n] != null){
if(n.substr(0,2)=="on"){
div.bind(n.substr(2), this[n]);
}else if(n != "src"){
div.attr(n, this[n]);
}
}
}
div.attr("style", this.style.cssText);
div.css({
width : this.width + "px",
height : this.height + "px",
filter : "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='scale')"
});
if(this.align == "left"){ div.css("float", "left"); }
if(this.align == "right"){ div.css("float", "right"); }
if(this.parentNode.href){ div.css("cursor", "hand"); }
this.parentNode.replaceChild( div[0], this );
});
});
</script>
Das ganze kann man natürlich als jQuery - Erweiterung implementieren, so dass der Code sich dann ändert in:
<script type="text/javascript">
jQuery.fn.setPNGTransparenz4IE6 = function(){
return this.each(function(e){
if(!$.browser.msie){
return this;
}else if(parseInt($.browser.version) != 6){
return this;
}
var div = $("<div />");
for(var n in this.attributes){
if(this[n] != "" && this[n] != null){
if(n.substr(0,2)=="on"){
div.bind(n.substr(2), this[n]);
}else if(n != "src"){
div.attr(n, this[n]);
}
}
}
div.attr("style", this.style.cssText);
div.css({
width : this.width + "px",
height : this.height + "px",
filter : "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='scale')"
});
if(this.align == "left"){ div.css("float", "left"); }
if(this.align == "right"){ div.css("float", "right"); }
if(this.parentNode.href){ div.css("cursor", "hand"); }
this.parentNode.replaceChild( div[0], this );
});
}
$(document).ready(function(e){
$("img[src$='png']").setPNGTransparenz4IE6();
});
</script>
Es hat sich nicht viel geändert am Code - die Auswahlabfrage auf alle Bilder die in der Dateierweiterung auf *.png enden findet jetzt außerhalb statt.
Auf diese Auswahl wird dann die Erweiterungsmethode setPNGTransparenz4IE6 aufgerufen.
Ihr Kommentar zu diesem Beitrag: