Changing colors of an image using HTML5/CSS/JS?

Question

Is there a way to change colors of an image much like in Flash/ActionScript with using only HTML5/CSS/JavaScript?

Here's an example in Flash: http://www.kirupa.com/developer/actionscript/color.htm

My guess would be that it's only possible with Canvas, as far I know; but I'd like to know if there's another solution out there that also supports IE7 & IE8, without the need to install a google plugin for IE.

Answer 1

It depends on what you're trying to do.

If all you want is to overlay an image with a color, then you could layer a DIV on top which has a partially-transparent PNG of the desired color as its background image. Here's a JS Fiddle demonstrating:

http://jsfiddle.net/btCfK/

I don't have a copy of IE 7 handy to check, but I'm pretty sure that'll work in older IEs (later than 6 anyway).

This example uses a fixed size for both the overlay and the image. With some clever coding you could change that, and make a JavaScript based control for swapping colors in or out.

If you want something more sophisticated than that, it's probably not practical without using a Canvas element, SVG, or one heck of a lot of JavaScript.

Answer 2

I just stumbled upon this question and I thought I'd mention CSS filters .

At this time, only Chrome fully supports them ( http://caniuse.com/#feat=css-filters ), but things might improve in the future.