need ideas to only display some pixels and gray out the remaining pixels

I'm looking for ideas ...brainstorming a new project for a client ....I have an image ...300px x 300px ...I need to display the image one random pixel at a time until the entire image is revealed.

Basically, at certain intervals, a pixel is reveal开发者_运维知识库ed and remains revealed while other pixels are still blank. At each interval, another pixel at random is revealed and remains revealed to join the other revealed pixels. Eventually, all the pixels will be revealed.

Any suggestions on how to make that happen?

I could make numerous copies of the image and manually reveal one random pixel, but surely it can be done programatically :)

Oh, and it cannot be any form of flash.

---

EDIT: I realize I mis-interpreted what you needed to do, but I thought this was cool anyway and could be applied to your problem...

See working demo of the following →

I threw this together in jQuery. I made each pixel actually a 3x3 box instead because otherwise it would take way too long to process. Seems to work pretty well for something on this in client side, though I haven't tested IE yet.

<div id="w">
    <img id="i" src="yourImage.jpg" width="300" height="300" />
</div>

$('#w').css({
    width: $('#i').width(),
    height: $('#i').height()
});

var htmlFrag = '',
    id, ids = [],
    removePix = function () {
        if (ids.length) {
            var rand = Math.floor(Math.random()*ids.length);
            $('#'+ids[rand]).fadeOut(function(){
                $(this).remove();
            });
            ids = ids.slice(0, rand).concat(ids.slice(rand+1));
            setTimeout(removePix, 1);
        }
    };

for (var i = 0, len = $('#i').height(); i < len; i += 3) {
    for (var j = 0, len = $('#i').width(); j < len; j += 3) {
        id = 'pix'+j+'-'+i;
        ids.push(id);
        htmlFrag += '<div id="'+id+'" class="pix" ' +
                    'style="width:3px;height:3px;position:absolute;' +
                    'left:'+j+'px;top:'+i+'px;"></div>';
    }
}

$('#w').html($('#w').html() + htmlFrag);

removePix();

See working example →

---

1. Load the image file into an image resource (imagecreatefrompng, imagecreatefromgif, etc).

2. Decide what pixels to show, using rand() or however you want to choose them.

3. Loop over every pixel in the image, and if it's not one you chose to show, color it gray with imagesetpixel.