I generally prefer using PNGs to display images. They look better than GIFs because of the alpha-channel transparency, they compress much better than GIFs, and the color range is significantly wider and allows for smoother transitions and greater color precision. Plus, if you can live with the larger file size, they don’t have that lossy ghost pixelating of JPGs.
The problem is (what else?!) Internet Explorer, specifically version 6.X as it doesn’t support 24-bit PNG images with an alpha layer — which, of course, is what everyone wants on their web pages! So far, just about everybody and their grandmother creates “png.htc“, an IE-specific “behavior” component that fixes the alpha channel with an overlay. Then they apply a style class to the img (class="png") and then add a style to their stylesheet (.png { behavior: url('png.htc'); }).
Since I often use Firefox for development and testing, I sometimes forget to look for those easily overlookable details in IE. I still use png.htc files, but now I include a small script that searches the DOM for PNGs and applies the behavior style automatically, activated with an onload action (<body onLoad="fixBrowsers();">). It uses something called a Conditional Comment, a technique created by Microsoft, so it is sometimes praised and sometimes vilified.
Now I don’t have to remember to include the class for each image, and IE behaves the way I expect it to. Simple!
<script type="text/javascript">// <![CDATA[
function fixBrowsers() {
/*@cc_on
/*@if (@_jscript_version == 5.6)
// add fix-alpha-layer behavior to all PNG images
var array_images = document.getElementsByTagName("img");
var array_pngs = new Array();
var x;
for (var i=0; i<array_images.length; i++) {
x = array_images[i];
if (array_images[i].src.substring(array_images[i].src.length -3,
array_images[i].src.length) == “png”) {
array_pngs.push(x);
}
}
for (var x=0; x<array_pngs.length; x++) {
array_pngs[x].style.behavior = ”url(’png.htc’)”;
}
/*@end
@*/
}
// ]]></script>
Now, if only the fixBrowsers function would magically fix everything that is wrong with IE6. Now THAT would be the most sought-after JavaScript function ever!!
Author’s Note: By now, given that even IE7 and IE8 are hopefully soon to be on the distant horizon, pretty much anything to do with IE6 is now hopelessly obsolete, as is my snippet of code above.
For any of you still interested in developing for IE5 and IE6 for some strange reason, check out the awesome IE7-JS library which pretty much does magically fix everything wrong with IE5 and IE6. (Thanks to Brett for pointing out that library.)
Actually, there is some JavaScript that fixes just about every problem with IE6. It’s called ‘IE7’ by Dean Edwards, and it’s available at http://dean.edwards.name/IE7/
Don’t expect it to be just a single function though – it’s a whole library. But nowadays, I feel IE6 users deserve to have to surf around the web with a crutch.
UPDATE: I’ve modified the code to use conditional comments inside the JavaScript instead of outside in order to make it easier to implement. Also, since it is usually activated with an onLoad event, I changed the script name from the old fixInternetExplorer to just fixBrowsers. That lets you expand it much easier to suit multiple purposes. Have fun!
UPDATE: Since IE7 handles the alpha layers of PNGs properly, I’ve modified the code to handle the problem only in IE6, effectively doing nothing (and therefore safe to use) with IE7. With today’s mandatory push of IE7 by Microsoft and the resulting significant decrease in the number of users with IE6, this script will probably be obsolete soon.