JavaScript Forum

**carterdea** · 08-02-2006, 08:45 PM

I used a script to make transparent png's work in IE but it didn't work! Here's the link.

If you know any scripts that work, or can fix my existing script, please tell me!

Thanks

carter

**mastercomputers** · 03:38 PM

This script should work. I've rewritten it slightly:

Here it is:

fixpng.js saved in the same directory as the page using it.

Code:

var arVersion = navigator.appVersion.split('MSIE');
    var version = parseFloat(arVersion[1]);
    if(version >= 5.5 && document.body.filters)
    {
      for(var i = 0, n = document.images.length; i < n; i++)
      {
        var img = document.images[i];
        var imgName = img.src.toUpperCase();
        if(imgName.substring(imgName.length - 3, imgName.length))
        {
          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 + '", sizingMethond="scale");"></span>';
          img.outerHTML = strNewHTML;
          i = i - 1;
        }
      }
    }

Tested in IE6 and works.

To use it you insert this line inside your <head> element.

Code:

<!--[if lt IE 7]><script type="text/javascript" defer="true" src="fixpng.js"></script><![endif]-->

You must make sure that your images have the correct src, alt, width and height attribute. If not it could fail, it also does not work for background images.

For Linux users using IE under wine, it will throw an alert because the DirectX class is not avaliable, nor did I hear any plans of it. If you want to be sneaky, then change the type="text/css", it is only affecting IE after all and IE usually uses it's own mime detection technique rather than relying on what authors say it is.

I'm not sure whether this is a quicker option than just loading a transparent gif, but if you need alpha transparency, then this is the only way you could do such a thing.

Cheers,

MC

**ADAM Web Design** · 08-07-2006, 04:18 PM

Code:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='(your image here)');

It's not valid CSS, but it does work every time. So if you're really worried about it, I'd suggest putting this in its own CSS file that you know is invalid and that you don't care about and then putting the valid CSS separate.

**carterdea** · 08-07-2006, 10:33 PM

thanks soooo much