Using a slightly tweaked version of Chris Nott's , we set some global variables to this effect that we can use later on.
// if IE5.5+ on Win32, then display PNGs with AlphaImageLoader if ((browser.isIE55 || browser.isIE6up) && browser.isWin32) { var pngAlpha = true; // else, if the browser can display PNGs normally, then do that } else if ((browser.isGecko) |» | (browser.isIE5up && browser.isMac) |» | (browser.isOpera && browser.isWin » && browser.versionMajor >= 6) |» | (browser.isOpera && browser.isUnix » && browser.versionMajor >= 6) |» | (browser.isOpera && browser.isMac » && browser.versionMajor >= 5) |» | (browser.isOmniweb && » browser.versionMinor >= 3.1) |» | (browser.isIcab && » browser.versionMinor >= 1.9) |» | (browser.isWebtv) |» | (browser.isDreamcast)) { var pngNormal = true; }(Note for the faint of heart: complete source code for all the examples we cover is available at the end of the article.)
Tactic 1: Quick and Dirty with document.writesThe simplest, most reliable way to spit out PNGs is using inline document.writes based on the above detection. So we use a function like this:
function od_displayImage(strId, strPath, intWidth, » intHeight, strClass, strAlt) { if (pngAlpha) { document.write('<div »></div>'); } else if (pngNormal) { document.write('<img src="'https://www.jb51.net/+strPath+'.png" »» » alt="'+strAlt+'" />'); } else { document.write('<img src="'https://www.jb51.net/+strPath+'.gif" »» » alt="'+strAlt+'" />'); } }Now we can call the od_displayImage function from anywhere on the page. Any JavaScript-capable browser will display an image, and, if we want to be really careful, we can accompany each call with a <noscript> tag that contains a regular <img> reference. So the respectable browsers get PNGs normally, IE5.5+/Win gets them with the filter, and all other browsers get regular GIFs, whether they have JavaScript turned on or not.
It's a time-tested method, but what if we want more control over our PNGs?
Tactic 2: the Beauty & Majesty of ObjectsWhen I told the programmer in the office next door that I was writing this article, he took one look at my code, glowered at me, and said, “Fool. Where's the abstraction? You need to use objects.”
So now we have a JavaScript object to display PNGs. Here's how we use it:
<html><head> <script language="javascript" src="https://www.jb51.net/browserdetect_lite.js" type="text/javascript"> </script> <script language="javascript" src="https://www.jb51.net/opacity.js" type="text/javascript"></script> <script type="text/javascript"> var objMyImg = null; function init() { objMyImg = new OpacityObject('myimg','/images/myimage'); objMyImg.setBackground(); } </script> <style type="text/css"> #myimg { background: url('back.png') repeat; position:absolute; left: 10px; top: 10px; width: 200px; height: 200px; } </style> </head> <body background="back.jpg"> <div></div> </body> </html>That's it. The cool thing about the OpacityObject is that we just pass it a DIV ID and an image path and we're done. Using the appropriate technique, it applies the image as a background of the DIV, and from there we can do whatever we want with it. Fill it with text, move it across the screen, resize it dynamically, whatever – just like any other DIV.
The object works in any CSS 1-capable browser that can dynamically apply a background image to a DIV with JavaScript. It's completely flexible, and we could even use it in place of the above function.
The trade-off is that it doesn't degrade as nicely. Netscape 4.7/Win/Mac and Opera 5/Mac, for instance, won't display an image at all. And it has another significant problem, which is this:
IE5/Mac only supports alpha transparency when the PNG resides in an <img> tag, not when it's set as the background property of a DIV. So PNGs displayed with the OpacityObject will appear 100% opaque in IE5/Mac. This problem is especially frustrating because IE5/Mac is the only browser which natively supports PNG and behaves this way. We've notified Microsoft about this apparent bug and hope for it to be fixed in an upcoming release.