Put together several images of furniture to imitate color-changing

I'm working on a website for a furniture manufactor. We use jQuery alot on the site.

I want parts of the furniture to change colors, so I think I will make a div with the base furniture, and a overlay div with the part that can change color. The overlay div will contain a masked PNG of the current furniture in the selected color.

I then want to show 10-15 different colors (that will be transparent,开发者_Python百科 masked PNG's).

My problem is how to match the right furniture with the right overlay PNG's.

If I have a bench, a table and a chair, each with 10-15 overlays, for example. How can I pair these, so they work correctly, and doesn't set the table-overlay on top of a chair-base?

Thank you in advance.

---

I'd have a holder like this:

<div id="chair_holder" style="background-image:url(chair.png)">
    <img class="overlay red" src="red_chair.png"/>
    <img class="overlay green" src="green_chair.png"/>
    <img class="overlay blue" src="blue_chair.png"/>
    etc...
</div>

for each item of furniture. Then I can show a particular color overlay for a given holder like this:

function showColorOverlay(holder_id, color)
{
    var holder = $('#' + holder_id); //  Get the holder by id
    $('.overlay', holder).hide(0); //  Hide all overlays
    $('.' + color, holder).show(0); //  Show the correct overlay
}

then I could call showColorOverlay('chair_holder', 'red'); to show the red chair, for instance.

If having all these PNGs loading makes the page slow (use pngcrush to get them as small as possible) you could lazy-load them in showColorOverlay.