Posted By

neilp123 on 09/21/10


Tagged


Versions (?)

Who likes this?

3 people have marked this snippet as a favorite

NyX
luman
maltem


PNG Fix for IE


 / Published in: JavaScript
 

  1. /*
  2.  
  3. Correctly handle PNG transparency in Win IE 5.5 & 6.
  4.  
  5. /////////////////////////////////////////////////////////////////////
  6. Add the conditional comment below inside the head of your document
  7. and copy and paste the script into it's own file!
  8. ///////////////////////////////////////////////////
  9.  
  10.  
  11. <!--[if lt IE 7]>
  12. <script defer type="text/javascript" src="pngfix.js"></script>
  13. <![endif]-->
  14.  
  15. */
  16.  
  17. var arVersion = navigator.appVersion.split("MSIE")
  18. var version = parseFloat(arVersion[1])
  19.  
  20. if ((version >= 5.5) && (document.body.filters))
  21. {
  22. for(var i=0; i<document.images.length; i++)
  23. {
  24. var img = document.images[i]
  25. var imgName = img.src.toUpperCase()
  26. if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
  27. {
  28. var imgID = (img.id) ? "id='" + img.id + "' " : ""
  29. var imgClass = (img.className) ? "class='" + img.className + "' " : ""
  30. var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
  31. var imgStyle = "display:inline-block;" + img.style.cssText
  32. if (img.align == "left") imgStyle = "float:left;" + imgStyle
  33. if (img.align == "right") imgStyle = "float:right;" + imgStyle
  34. if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
  35. var strNewHTML = "<span " + imgID + imgClass + imgTitle
  36. + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
  37. + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
  38. + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
  39. img.outerHTML = strNewHTML
  40. i = i-1
  41. }
  42. }
  43. }

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: akashkhairate on October 1, 2010

Extremely useful snippet especially if you still need to cater to IE6 for some reason.

Please note the following points while you use the above snippet: a). Doesn't work on background images; you will have to get your images to foreground if possible b). Needs width and height attributes to be specified for the tag

Regards, ~Akash

You need to login to post a comment.