Revealing an image bit by bit?

Question

I'm trying to get it so, every time someone donates a set amount on a page, another equal portion of an image is revealed. I've got most of the other logic down (PayPal provides nice unique "you've donated" identifiers and such), however, I'm having trouble with revealing the image bit by bit.

I tried breaking up the image into small chunks (person wants at least 250 donations until the image is totally revealed), however, that doesn't work because of multiple formatting images. Is there any better way (say, PHP image processing or perhaps CSS/Javascript)?

Answer 1

You could hide the image inside a <div>, with overflow set to hidden. Then you can simply make the div element higher as you recieve more donations.

<div id="imageContainer">
   <img src="secretImg.jpg"/>
</div>

CSS:

#imageContainer {
   height: 20px;
   overflow: hidden;
}

Answer 2

Why don't you just create 251 static images, one for each payment level and serve the correct static image dynamically, based on the proportion of funds received to date.

This seems to be the simplest way of doing it, the only code required is to query the payment level, and send the relevant image down to the client.

So have a image0.jpg (empty), image1.jpg (one segment), image2.jpg and so on, up to image250.jpg (all segments), and have your web application serve the correct one.

You'll need to make sure these images aren't accessible in the public area of your web site so people can't just figure out the URL and steal your "precious".

So, your web application will receive a request for images/image.jpg, query which image should be sent, and respond with the data stream from the actual image, something like:

if actual > desired:
    number = 250
else:
    number = int (actual * 250 / desired)
imagename = "image" + str(number) + ".jpg"