Change color of image in javascript

Question

I want to change the color of a map image dynamically (say from blue to red). And I can't use canvas as I have to support IE.Any idea how i can manipulate an image on client side using javascript?

Answer 1

If the color transitions are very polarized (ie, not a lot of subtle gradient changes), you can make a transparent "hole" for the colored part of you image (use the 8-bit png or gif format to support IE6), and set the background-color to the real color:

<!-- mymap.png contains a transparent "hole" for color -->
<img id="colorme" src="mymap.png" style="background-color:red" />

<script>
// change the color to blue:
document.getElementById('colorme').style.backgroundColor = 'blue'
</script>

This does not address your quest to "manipulate an image on client side". Manipulating images in arbitrary ways is only possible with things like canvas, and some parts of IE-only vml. But if it's a simple color change, this trick might suffice.

Answer 2

Do it server side and fetch it as a new resource, for example use a transparent spacer image and place the real image URLs as background-image attributes in a set CSS selectors using class names.

Now changing the className of the image should replace the image shown, no nasty clever stuff needed clientside.

Answer 3

depending on what you have to do, you can use pure CSS to move a background image's viewport. see this site's top nav menu: http://grotonhomesforsale.com

see how when you mouse over it, the image under the text changes? you can do the same thing but with a different image

Answer 4

Currently IE supports canvas starting from IE 9, so it is possible to convert to canvas and manipulate the image in IE.

you can consider this jquery plugin. It is easy to use.

$("#myImageID").tancolor();

There's an interactive demo . You can play around with it.

Check out the documentation on the usage, it is pretty simple. docs