Reply to comment

Display transparent PNG images in IE6

Thu, 06/03/2010 - 12:34 — Qing

Most browsers such as Firefox and Safari support for transparent PNG images. However, there are still numbers of IE6 users who could not take advantage of PNG image transparency.

After googling this problem, testing and comparing different solutions, I finally found an easy and efficient method.

The first step is adding a JavaScript function within the header of each page of HTML or the PHPTemplate file (in case you are a Drupal magician like me :D ).

<head>
<script type="text/javascript">
// Correctif de l'affichage des images PNG dans IE5.5 et IE6 
(transparent pour les autres navigateurs).
// V1.1 par Brice de Villeneuve,  <a href="http://www.boursica.com/<br />
//" title="http://www.boursica.com/<br />
//">http://www.boursica.com/<br />
//</a> Licence : freeware, librement utilisable du moment que vous laissez ces 
commentaires dans votre source.
// Mettre ce script dans le head et dans les balises IMG ajouter simplement : 
onload='setpng(this)'
// Si l'image n'est pas visible (display:none par exemple), appeler la fonction 
juste après l'affichage de l'image
// dans un javascript avec, par exemple, un setpng(document.getElementById('idDeMonImage');
 
function setpng(img) { 
if(document.all && (IEver=parseFloat(navigator.appVersion.split("MSIE")[1])) && (IEver>=5.5) && (IEver<7) && document.body.filters && img) 
 {
imgName=img.src.toUpperCase();
if(imgName.substring(imgName.length-3,imgName.length)=="PNG") img.outerHTML=
	"<span "+(img.id?"id='"+img.id+"' ":"")+(img.className?"class='"+img.className+"' ":"")+(img.title?"title=\""+img.title+"\" ":"")
	+"style=\"width:"+img.width+"px;height:"+img.height+"px;"+(img.align=="left"?"float:left;"  decu img.align=="right"?"float:right;":""))
	+(img.parentElement.href?"cursor:hand;":"")+"display:inline-block;"+img.style.cssText+";"
		+"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+img.src+"',sizingMethod='scale');\"></span>";
 }
}
 
</script>
</head>

The second and the last step is adding onload="setpng(this)" attribute within the img tag. That’s all.

<img id="imagepng" src="imagepng.png" onload="setpng(this)"  alt="image png"  />

Now test your pages under IE6. It works, isn’t it?

But with this solution, your pages won’t be HTML validated. Here’s a tip: add HTML tag inside of the script tag.

<head>
<script type="text/javascript">
<!--
........
-->
</script>
</head>