Software is like sex... It's better when it's free.

Blog - PNG Fix script for IE6

PNG Fix script for IE6

A very useful script for those, like me, who are tired of stylesheets in IE6 only dedicated to problems of transparency in png.

This js script loads only on IE6 (and lower) in this way:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <!--[if lt IE 7]>
      <script defer type="text/javascript" src="Public/Scripts/Javascript/Statics/pngfix.js"></script>
    <![endif]-->
  </head>

It allows, if we affect the attributes html width = "" and height = "" to images in question, to apply transparency on them. The script available on the author website PNG Fix is the following :

var arVersion = navigator.appVersion.split("MSIE");
var version = parseFloat(arVersion[1]);
if ((version >= 5.5) && (document.body.filters))
{
  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;
    }
  }
}
Tags:  hackie6javascriptmicrosoft.
Posted the Wednesday 29 april 2009 23:54:26

Comments :

LBIE, the thursday 07 may 2009 12:35:05
A noter que le seul inconvénient est que le script ne s'applique que sur les balises img, et pas sur les background-image. Pour y pallier, vous pouvez feinter IE6 grâce à au mot clé !important en css que j'explique dans cet article.