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.