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?
我想动态地改变地图图像的颜色(比如从蓝色到红色)。我不能使用画布,因为我必须支持IE.Any想法如何使用javascript在客户端操作图像?
4 个解决方案
#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:
如果颜色过渡是非常极化的(即,没有很多细微的渐变变化),您可以为图像的彩色部分制作透明的“洞”(使用8位png或gif格式来支持IE6),以及将背景颜色设置为真实颜色:
<!-- 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.
这并不能满足您“在客户端操纵图像”的要求。只有像canvas这样的东西以及IE-only vml的某些部分才能以任意方式操作图像。但如果它是一个简单的颜色变化,这个技巧可能就足够了。
#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.
将其作为服务器端并将其作为新资源获取,例如使用透明的间隔图像并将实际图像URL作为背景图像属性放置在使用类名的集合CSS选择器中。
Now changing the className of the image should replace the image shown, no nasty clever stuff needed clientside.
现在更改图像的className应该替换显示的图像,客户端不需要讨厌的聪明的东西。
#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
根据您的操作,您可以使用纯CSS移动背景图像的视口。看到这个网站的*导航菜单: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
看看当鼠标悬停在它上面时,文字下的图像会发生变化吗?你可以做同样的事情,但有不同的形象
#4
Currently IE supports canvas starting from IE 9, so it is possible to convert to canvas and manipulate the image in IE.
目前IE支持从IE 9开始的画布,因此可以转换为画布并在IE中操作图像。
you can consider this jquery plugin. It is easy to use.
你可以考虑这个jquery插件。它很容易使用。
$("#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
查看有关用法的文档,非常简单。文档
#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:
如果颜色过渡是非常极化的(即,没有很多细微的渐变变化),您可以为图像的彩色部分制作透明的“洞”(使用8位png或gif格式来支持IE6),以及将背景颜色设置为真实颜色:
<!-- 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.
这并不能满足您“在客户端操纵图像”的要求。只有像canvas这样的东西以及IE-only vml的某些部分才能以任意方式操作图像。但如果它是一个简单的颜色变化,这个技巧可能就足够了。
#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.
将其作为服务器端并将其作为新资源获取,例如使用透明的间隔图像并将实际图像URL作为背景图像属性放置在使用类名的集合CSS选择器中。
Now changing the className of the image should replace the image shown, no nasty clever stuff needed clientside.
现在更改图像的className应该替换显示的图像,客户端不需要讨厌的聪明的东西。
#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
根据您的操作,您可以使用纯CSS移动背景图像的视口。看到这个网站的*导航菜单: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
看看当鼠标悬停在它上面时,文字下的图像会发生变化吗?你可以做同样的事情,但有不同的形象
#4
Currently IE supports canvas starting from IE 9, so it is possible to convert to canvas and manipulate the image in IE.
目前IE支持从IE 9开始的画布,因此可以转换为画布并在IE中操作图像。
you can consider this jquery plugin. It is easy to use.
你可以考虑这个jquery插件。它很容易使用。
$("#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
查看有关用法的文档,非常简单。文档