Cambiar el color de la imagen en javascript

Question

Quiero cambiar dinámicamente el color de una imagen de mapa (por ejemplo, de azul a rojo). Y no puedo usar lienzo ya que tengo que soportar IE. ¿Alguna idea de cómo puedo manipular una imagen en el lado del cliente usando javascript?

Answer 1

Hágalo desde el lado del servidor y tóquelo como un nuevo recurso, por ejemplo, use una imagen de espaciador transparente y coloque las URL de la imagen real como atributos de imagen de fondo en un conjunto de selectores CSS utilizando nombres de clase.

Ahora, cambiar el nombre de clase de la imagen debe reemplazar la imagen que se muestra, no hay cosas desagradables que se necesiten.

Answer 2

dependiendo de lo que tenga que hacer, puede usar CSS puro para mover la ventana de una imagen de fondo. vea el menú de navegación superior de este sitio: http://grotonhomesforsale.com

¿Ve cómo al pasar sobre él, la imagen debajo del texto cambia? puede hacer lo mismo pero con una imagen diferente

Answer 3

Si las transiciones de color son muy polarizadas (es decir, no hay muchos cambios de gradiente sutiles), puede hacer un "agujero" transparente para la parte coloreada de su imagen (utilizar el formato PNG o gIF de 8 bits para apoyar IE6), y establecer el color de fondo al color real:

<!-- 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> 

Esto no se refiere a su búsqueda para "manipular una imagen en el lado del cliente". La manipulación de imágenes de formas arbitrarias solo es posible con elementos como canvas y algunas partes de vml solo de IE. Pero si se trata de un simple cambio de color, este truco podría ser suficiente.

Answer 4

Actualmente, IE admite canvas desde IE 9, por lo que es posible convertirlo en lienzo y manipular la imagen en IE.

puede considerar este plugin jquery. Es fácil de usar.

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

Hay un demo interactivo. Puedes jugar con eso.

Echa un vistazo a la documentación sobre el uso, es bastante simple. docs