is it possible to change the colors on parts of an image using jquery, css, etc

i have an image that shows different fireworks. I want to make the colors configurable so there is a combobox that says:

1. USA (which should color the fireworks red, white and blue)
2. St Patricks Day (which should color the fireworks various shades of green . .
3. etc . .

and i want it to look like this:

or this:

the fireworks are all a single image right now and i would want to "intermingle" the selected color (so for #1 above, it shows red, white and blue all sitting side by side. (compared to the left side of the image is all blue, the right side is all red, etc. .)

so i have an image and i have two choices:

1. Create a seperate image for every example in the dropdown.
2. See if there is a way to dynamically change colors of parts of an image within an html page
3. other suggestions ??

i wanted to get 开发者_JAVA技巧feedback on if #2 was possible or i should stick with #1. obviously as the list gets longer, #1 becomes more annoying and #2 is more appealing (if its possible)

Well my other suggestion would be to have the firework as a mask, inverted, and use an underlying background colour in the box that holds it.

That way you will get your colour tints however you like, with a single alpha-transparency image.

You can use png's transparency. Create the fireworks in way that the place you want to be changed to be transparent. Then wrap the image within a div, which will change its color using javascript.

A sample code is below using jQuery

$("#green").click(function() {
    $("div").css("background", "green")
});

$("#yellow").click(function() {
    $("div").css("background", "yellow")
});

html

<div><img src="path-to-image.png"></div>

Demo: http://jsfiddle.net/wyZnc/