Your Development & Design Resource

Using PNG, and the cross-browser hack!

I'm doing a lot of web-work as of late (some using Domino and some not). As a result of this, I've been working with Photoshop moreso now than ever before, as the majority of my work has been marketing-related.

This being said, I'm really starting to push the usage of the PNG format for my images. Before going any further, here's some information on the PNG format:

PNG (Portable Network Graphics) Home Site
Intro to PNG Features
Why should I use PNG images on my webpage? -
To PNG or not to PNG |

Now, in order to use this cross-browser, you'll need to use the following javascript hack for IE issues.

I only have but a minor enhancement to this, marked below in bold!

function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
  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 = ( ? "id='" + + "' " : ""
      var imgClass = (img.className) ? "class='" + img.className + "' " : ""
      var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
      var imgStyle = "display:inline-block;" +
      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
if (window.attachEvent) window.attachEvent("onload", correctPNG);

This checks to see if window.attachEvent can be ran (if so, the browser's IE-based) and then sets to correctPNG() function to run onload of the body!

With this code in your common javascript library, it's easy enough to add PNG files to your web-based solutions, while ensuring that the format works across all browsers as intended!

About the author: Chris Toohey

Thought Leadership, Web & Mobile Application Development, Solutions Integration, Technical Writing & Mentoring

A published developer and webmaster of, Chris Toohey specializes in platform application development, solutions integration, and evangelism of platform capabilities and best practices.

More from is powered by IBM Notes Domino XPages & hosted by Prominic.NET

Contact Us

Use our Contact / Feedback form or one of these email addresses:

Creative Commons License

Except where otherwise noted, by Chris Toohey is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.