web development articles, design articles, web design articles, php articles

HOWTO: Transparent PNG in Internet Explorer 6

Better than Google AdSense!

Sometimes when GIF's 1bit transparency is not enough, you may decide to use transparent 24bit PNG with 8bit of transparency. Then you may face with some strange displaying it in Internet Explorer:

Though in Mozilla Firefox or Opera it is OK:

Solution: just include next lines inside head tag in your page:

<!--[if gte IE 5.5000]>
<script type="text/javascript" src="fixpng.js"></script>
<![endif]-->

and put the fixpng.js file in the same directory. You can download it here or just copy contents:

function correctPNG() 
   {
   for(var i=0; i<document.images.length; i++)
      {
   var img = document.images[i]
   var imgName = img.src.toUpperCase()
   if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
      {
   var imgID = (img.id) ? "id='" + img.id + "' " : ""
   var imgClass = (img.className) ? "class='" + img.className + "' " : ""
   var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='"
+ img.alt + "' "
   var imgStyle = "display:inline-block;" + img.style.cssText 
   if (img.align == "left") imgStyle = "float:left;" + imgStyle
   if (img.align == "right") imgStyle = "float:right;" + imgStyle
   if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle  
   var strNewHTML = "<span " + imgID + imgClass + imgTitle
   + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;"
+ imgStyle + ";"
      + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
   + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
   img.outerHTML = strNewHTML
   i = i-1
      }
      }
   }
window.attachEvent("onload", correctPNG);

as a result you will get corretly displayed transparent PNG in Internet Explorer: