PNG 24 Transparency


Put this in the head section of all of your pages that use PNG-24s with transparency and they will show up right in Internet Explorer.
JavaScript Code
  1. <!--[if lt IE 7]>
  2. <script type="text/javascript">
  3.  
  4. var arVersion = navigator.appVersion.split("MSIE")
  5. var version = parseFloat(arVersion[1])
  6.  
  7. function correctPNG() // correctly handle PNG transparency in Win IE 5.5 and 6.
  8. {
  9. if ((version >= 5.5) && (document.body.filters))
  10. {
  11. for(var i=0; i<document.images.length; i++)
  12. {
  13. var img = document.images<i>
  14. var imgName = img.src.toUpperCase()
  15. if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
  16. {
  17. var imgID = (img.id) ? "id='" + img.id + "' " : ""
  18. var imgClass = (img.className) ? "class='" + img.className + "' " : ""
  19. var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
  20. var imgStyle = "display:inline-block;" + img.style.cssText
  21. var imgAttribs = img.attributes;
  22. for (var j=0; j<imgAttribs.length; j++)
  23. {
  24. var imgAttrib = imgAttribs[j];
  25. if (imgAttrib.nodeName == "align")
  26. {
  27. if (imgAttrib.nodeValue == "left") imgStyle = "float:left;" + imgStyle
  28. if (imgAttrib.nodeValue == "right") imgStyle = "float:right;" + imgStyle
  29. break
  30. }
  31. }
  32. var strNewHTML = "<span " + imgID + imgClass + imgTitle
  33. strNewHTML += " style="" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
  34. strNewHTML += "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
  35. strNewHTML += "(src='" + img.src + "', sizingMethod='scale');""
  36. strNewHTML += " onmouseover="PNGswap('" + img.id + "');" onmouseout="PNGswap('" + img.id +"');""
  37. strNewHTML += "></span>"
  38. img.outerHTML = strNewHTML
  39. i = i-1
  40. }
  41. }
  42. }
  43. }
  44. window.attachEvent("onload", correctPNG);
  45.  
  46. function PNGswap(myID)
  47. {
  48. var strOver = "_on"
  49. var strOff = "_off"
  50. var oSpan = document.getElementById(myID)
  51. var currentAlphaImg = oSpan.filters(0).src
  52. if (currentAlphaImg.indexOf(strOver) != -1)
  53. oSpan.filters(0).src = currentAlphaImg.replace(strOver,strOff)
  54. else
  55. oSpan.filters(0).src = currentAlphaImg.replace(strOff,strOver)
  56. }
  57.  
  58. </script>
  59. <![endif]-->


This code was not made by me, I found it useful so I posted it here.
Xerofait's Avatar
Author:
Views:
2,000
Rating:
There are currently no comments for this tutorial, login or register to leave one.