how to create shape in a web page from image and change its fill using javascript

I have a PNG image of black sock shape with a transparent background.

I want to be able to embed this image in a web page and change the fill of the shape from black to a开发者_C百科ny valid web colour using javascript (jQuery).

I would like to do this without flash, is this possible.

From my research it looks like I could convert the image to a html table but thats inefficient i'm sure.

Also I think Vector / SVG graphics might help here, but im not sure how to implement this.

Any help would be greatly appreciated.

I am a developer by day and web designer by night... still learning :)

I can't think of any way to achieve this with a png image, however you can export images directly to SVG using Illustrator. SVG is simply xml based markup like html, so this would allow you to programmatically alter the image with javascript.

Have u checked Google Chrome expermients? they have some that can be really helpful for u.