Transparent png images in IE6

Discussion in 'ASP .Net' started by Greg Peters, Mar 25, 2008.

  1. Greg Peters

    Greg Peters Guest

    I use png images with transparent backgrounds for the following ASP.NET
    server controls: Image, ImageButton, ImageMap, Panel (BackImageUrl for
    Panel). The images display correctly in IE7, but not IE6. What is the
    preferred solution to make all of these display correctly in IE6?
    Greg Peters, Mar 25, 2008
    #1
    1. Advertising

  2. Greg Peters

    siccolo Guest

    On Mar 25, 9:34 am, Greg Peters <>
    wrote:
    > I use png images with transparent backgrounds for the following ASP.NET
    > server controls:  Image, ImageButton, ImageMap, Panel (BackImageUrl for
    > Panel).  The images display correctly in IE7, but not IE6.  What is the
    > preferred solution to make all of these display correctly in IE6?


    I use the following:

    <head><title></title>
    <!--[if IE]>
    <script type="text/javascript">
    //lte IE 6
    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
    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]-->
    <style>
    table
    {
    -moz-opacity:0.5;
    filter:alpha(opacity=50);
    opacity: 0.5;
    }
    </style>
    </head>
    <body>
    ...
    <table >
    <tr>
    <td>
    <img src="<your png image">
    </td>
    </tr>
    </table>
    </body>
    </html>

    hope this helps...see it at http://apps.facebook.com/fbtestappsiccolo/

    ... more at http://www.siccolo.com/articles.asp
    siccolo, Mar 25, 2008
    #2
    1. Advertising

  3. Greg Peters

    Greg Peters Guest

    Thank you for your response. I tried it out in my application. It does work
    for images. It does not work for ImageButtons, ImageMaps or Panels with
    transparent backgrounds.

    "siccolo" wrote:

    > On Mar 25, 9:34 am, Greg Peters <>
    > wrote:
    > > I use png images with transparent backgrounds for the following ASP.NET
    > > server controls: Image, ImageButton, ImageMap, Panel (BackImageUrl for
    > > Panel). The images display correctly in IE7, but not IE6. What is the
    > > preferred solution to make all of these display correctly in IE6?

    >
    > I use the following:
    >
    > <head><title></title>
    > <!--[if IE]>
    > <script type="text/javascript">
    > //lte IE 6
    > 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
    > 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]-->
    > <style>
    > table
    > {
    > -moz-opacity:0.5;
    > filter:alpha(opacity=50);
    > opacity: 0.5;
    > }
    > </style>
    > </head>
    > <body>
    > ...
    > <table >
    > <tr>
    > <td>
    > <img src="<your png image">
    > </td>
    > </tr>
    > </table>
    > </body>
    > </html>
    >
    > hope this helps...see it at http://apps.facebook.com/fbtestappsiccolo/
    >
    > ... more at http://www.siccolo.com/articles.asp
    >
    Greg Peters, Mar 25, 2008
    #3
  4. Greg Peters

    Greg Peters Guest

    Hello,
    I solved the ImageMap problem by using blank images over the hot spots. The
    panel backgrounds were just oval gradients, so I converted those to gifs,
    which look just as good as the pngs. Thanks again for your post.

    "Greg Peters" wrote:

    > Thank you for your response. I tried it out in my application. It does work
    > for images. It does not work for ImageButtons, ImageMaps or Panels with
    > transparent backgrounds.
    >
    > "siccolo" wrote:
    >
    > > On Mar 25, 9:34 am, Greg Peters <>
    > > wrote:
    > > > I use png images with transparent backgrounds for the following ASP.NET
    > > > server controls: Image, ImageButton, ImageMap, Panel (BackImageUrl for
    > > > Panel). The images display correctly in IE7, but not IE6. What is the
    > > > preferred solution to make all of these display correctly in IE6?

    > >
    > > I use the following:
    > >
    > > <head><title></title>
    > > <!--[if IE]>
    > > <script type="text/javascript">
    > > //lte IE 6
    > > 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
    > > 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]-->
    > > <style>
    > > table
    > > {
    > > -moz-opacity:0.5;
    > > filter:alpha(opacity=50);
    > > opacity: 0.5;
    > > }
    > > </style>
    > > </head>
    > > <body>
    > > ...
    > > <table >
    > > <tr>
    > > <td>
    > > <img src="<your png image">
    > > </td>
    > > </tr>
    > > </table>
    > > </body>
    > > </html>
    > >
    > > hope this helps...see it at http://apps.facebook.com/fbtestappsiccolo/
    > >
    > > ... more at http://www.siccolo.com/articles.asp
    > >
    Greg Peters, Mar 27, 2008
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Martin Eyles

    Transparent PNG

    Martin Eyles, Dec 1, 2004, in forum: ASP .Net
    Replies:
    6
    Views:
    637
    Martin Eyles
    Dec 2, 2004
  2. Andrea Fino

    transparent png on explorer

    Andrea Fino, Apr 13, 2004, in forum: HTML
    Replies:
    17
    Views:
    669
    Mark Parnell
    Apr 14, 2004
  3. Susanne
    Replies:
    8
    Views:
    595
    Tim Fitzgerald
    Aug 2, 2004
  4. Keith Hughitt
    Replies:
    6
    Views:
    1,059
  5. +mrcakey
    Replies:
    9
    Views:
    457
    Jonathan N. Little
    Oct 11, 2008
Loading...

Share This Page