onclick png背景颜色变化

Question

我需要在图片下面设计一部分网页。在左侧，有颜色选项。如果用户从左侧选择任何颜色并单击图像部分，则图像的一部分应该由拾取的颜色填充。我花了更多时间进行谷歌搜索。大多数网站仅使用闪存。但我不知道闪光很好。是否可以使用jquery插件实现？

Answer 1

您可能希望查看<canvas>元素。至于点击时填充图像的特定位，您可能需要floodfill algorithm。

Answer 2

如果你能严格控制你使用的png文件，那么这真的可以简单地完成。

例如，除了要着色的区域外，您可以使png完全不透明。

然后你可以加载图像，只需设置单击颜色时所用元素的背景颜色。

这样的事情：

$(".ColorOption").click(function(e){
   e.preventDefault();
   var color = $(this).data("color");
   $("#MainImageBackground").css("background-color", color);
});

假设您使用数据属性设置颜色选项，如下所示：

<a data-color="#F00"></a>

与您的图像类似：

<div id="MainImageBackground">
   <img src="whatever"/>
</div>

Answer 3

您可以使用Javascript解决此问题，但因此您需要为每种颜色创建自己的图像。

<script language="JavaScript" type="text/javascript">


function changePic(picColor)
{
  if(picName == "btnRed")
  {
    document.getElementById(mainPic).src = "mainPicRed.jpg"
  } 
  else if(picName == "btnYellow")
  {
    document.getElementById(mainPic).src = "mainPicYellow.jpg"
  } 
}

</script>

每个颜色按钮的HTML：

<img src="red.jpg" name="btnRed" id="btnRed" onClick="changePic(this.name)">
<img src="mainPic.jpg" name="mainPic" id="mainPic">

Answer 4

创意1： 使用canvas元素并查看填充方法，这可能比flash更复杂。

创意2：

1. 创建透明的PNG，其中colourd区域是唯一透明的部分。

2. 创建2个DIVS，1在z-index 10，其他在20，相同大小，相同位置

3. 将图像放在顶部div中，即z-index 20.然后更改div 1中z-index 10处背景的颜色。

Answer 5

接受任何png并填充中间位置：

您可以在javascript中找到有关Floodfill算法的信息：

http://jsfiddle.net/loktar/ZLw9m/

但是你的实现必须更高级，因为你需要将图像转换为javascript理解的格式（例如0和1）然后在那个上运行算法

正如@musefan所指出的，如果你可以控制PNG，那就更容易了