Advanced Search

Results 1 to 3 of 3

Thread: How to fix IE 6 transparent png problem

  1. #1
    Join Date
    Mar 2006
    Location
    Nashville, TN
    Posts
    600
    Thanks
    5
    Thanked 4 Times in 4 Posts

    Default How to fix IE 6 transparent png problem

    In Internet Explorer 6 and below, transparetn pngs do not show correctly. The transparent part of the png is not transparent but a solid color. Anyways to fix that problem add this code to your head tag.

    HTML Code:
    <script language="JavaScript">
    function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
    {
       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
             }
          }
       }    
    }
    window.attachEvent("onload", correctPNG);
    </script>

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,699
    Thanks
    43
    Thanked 3,132 Times in 3,096 Posts
    Blog Entries
    12

    Default

    Not good, it will unnecessarily burden IE 7.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    May 2006
    Location
    Sydney, Australia - Near the coast.
    Posts
    1,995
    Thanks
    0
    Thanked 8 Times in 7 Posts

    Default

    A bit of conditional comments should fix that.
    Code:
    <!--[if lte IE 6]>
    <script type="text/javascript">
    function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
    {
       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
             }
          }
       }    
    }
    window.attachEvent("onload", correctPNG);
    </script>
    <![endif]-->
    Peter - alotofstuffhere[dot]com - Email Me - Donate via PayPal - Got spare hardware? Donate 'em to me :) Just send me a PM.
    Currently: enjoying the early holidays :)
    Read before posting: FAQ | What you CAN'T do with JavaScript | Form Rules | Thread Title Naming Guide

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •