March 20, 2006

PNG Alpha for MSIE

You will find other articles relevant to this document in these sections:
Cameron Manderson @ 5:02 pm

PNG Alpha Transparency is something really cool. But not supported by current version of MSIE.

What I like about this capability is having nice fluffy edges on your icons, and being able to lay them on different background cell colours, that may infact change with a mouse over etc.

I found a little reference to a way of getting around it. It appears that MSIE will display the transparency if it is placed through a SPAN rather than standard IMG. So we could simply create a function that allows us identify the browser and render the HTML depending on their compatibility. The SPAN output would be similar to:

< span style="position: relative; height: 100px; width: 100px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='ouricon.png', sizingMethod='scale');" />

In PHP you could simply determine the width using GD (for automatic) or instruct your function how to display. To determine if a user is using MSIE a simple check could be checked through a strisstr check for MSIE on the HTTP_USER_AGENT. Depending on your View handler this could be written as a plugin for reusability.

The trick is placing it in the style. So we could even factor this back into our normal IMG tag:

< img width="100" height="100" alt="home" xsrc="ouricon.png" mce_src="ouricon.png" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='ouricon.png', sizingMethod='scale');" />

Therefore when we are dealing with MSIE we need to specify our additional styles inline and we “should” be right to go.

Share and Enjoy:These icons link to social bookmarking sites where readers can share and discover new web pages.
  • del.icio.us
  • digg
  • Furl
  • Reddit
  • YahooMyWeb

2 Comments »

  1. Nice catch Cam. The problem should be fixed in IE 7 ;) . And just for the record AlphaImageLoader filter is only supported in IE 5.5 onwards. See MSDN’s official Knowledge Base Article; PNG Files Do Not Show Transparency in Internet Explorer
    Here’s a nice javascript solution as well:

    /*
    Add the following 3 lines to the top of your html document b/w the <HEAD></HEAD> tags
    <!–[if lt IE 7]>
    <script defer type=”text/javascript” xsrc=”pngfix.js” mce_src=”pngfix.js”></script>
    <![endif]–>
    */

    /* start pngfix.js */

    var arVersion = navigator.appVersion.split(”MSIE”)
    var version = parseFloat(arVersion[1])

    if ((version >= 5.5) && (document.body.filters))
    {
    for(var i=0; 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 = ”
    + ” style=\”" + “width:” + img.width + “px; height:” + img.height + “px;” + imgStyle + “;”
    + “filter:progid:DXImageTransform.Microsoft.AlphaImageLoader”
    + “(src=\’” + img.src + “\’, sizingMethod=’scale’);\”>”
    img.outerHTML = strNewHTML
    i = i-1
    }
    }
    }
    (source: http://homepage.ntlworld.com/bobosola)

    Comment by Richard Lee — March 20, 2006 @ 8:41 pm

  2. Thanks for the note! will definately check out!

    Comment by Cameron Manderson — March 21, 2006 @ 8:44 am

RSS feed for comments on this post. TrackBack URI

Leave a comment