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

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 2

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 3

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.