Question

I’ve been using http://www.dillerdesign.com/experiment/DD_belatedPNG/ for a while now and it has solved most of my IE6 png headaches.

I wonder though, whether there is a way of automating it so that I don’t have litter my code with class=”png” or adding the ids of html elements using background images to a JS file. – I don’t care really that this would slow IE6 down – It’s easier to explain to a client that the website is slow due to their browser than it is to explain why everything has a grey background!

I’m not really a JS expert but I guess grabbing the src attribute and adding the file name to the class isn’t difficult. – Somehow parsing the CSS and and adding the id of the containing element sounds difficult if not impossible though??

Answer 1

This isn’t tested but here is my jQuery solution which should work. It basically checks all img elements for a .png extension then checks all elements except img for a background image with a .png extension

You may need to add in extra code to check for CSS background property as well as background-image. With the body * selector I would imagine a lot of overhead on pages with lots of elements but I’m with you, I don’t care how long it takes IE6 users to load the page if they don’t care about updating their browser

$(function() {
    $('img').each(function() {
            if(this.src.split('.').pop() == 'png') {
                    DD_belatedPNG.fixPng(this)
            }
    });
    $('body *:not(img)').each(function() {
            if($(this).css('background-image').split('.').pop().replace(/("|\')\)/,'') == 'png') {
                    DD_belatedPNG.fixPng(this);
            }
    });
});

EDIT: I found this quite an interesting challenge so wrote up a pure JavaScript solution. It needs to be run when the DOM is ready though, so if you really don’t want to use jQuery or another framework with a DOM ready function you’ll have to use Dean Edwards’ method, like so:

document.write('<script type="text/javascript" id="domready" defer="defer" src="javascript:void(0)"><\/script>');
document.getElementById("domready").onreadystatechange = function() {
    if (this.readyState == "complete") {
        var imgs = document.getElementsByTagName('img')
        for(i=0; i < imgs.length; i++) {
            if(imgs[i].src.toLowerCase().search(/\.png$/) != -1) {
                DD_belatedPNG.fixPng(imgs[i]);
            }
        }

        var children = document.body.getElementsByTagName('*');
        for(i=0; i < children.length; i++) {
            var bg = children[i].currentStyle.backgroundImage;
            if(bg != 'none' && bg.toLowerCase().search(/\.png("|\')?\)$/) != -1) {
                DD_belatedPNG.fixPng(children[i]);
            }
        }
    }
}