jQuery 实现改变图片指定区域的颜色

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

javascript本身无法改变图片的颜色,不过我们可以通过一些技巧来实现一样的效果.

1、首先我们要知道图片哪些区域需要改变颜色,这里我们可以用执点地图的方法来弄

例1:

例1里面一张001-1.jpg的图片被分成了2个区域,

2、接下来我们还需要个颜色选择器,用以选择颜色.

这里使用一个JQUERY插件叫 Farbtastic 颜色选择器

使用方法:

引用JQUERY<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

引用JS<script type="text/javascript" src="farbtastic.js"></script>
引用CSS<link rel="stylesheet" href="farbtastic.css" type="text/css" />
做下初始化

</script>

3、有了选择器后我们现在需要改变这两个区域里的颜色

这里我们有个来改变热点地图颜色的JQUERY插件叫 Map Hilight

maphilight 是一个高亮显示鼠标悬停区域地图的插件。

使用方法:

引用<script type="text/javascript" src="jquery.metadata.min.js"></script>
引用<script type="text/javascript" src="jquery.maphilight.min.js"></script>

在上面的初始化加上一条

$(document). ready(function() {
$('.map').maphilight();
$('#fapicker').farbtastic('#color');
});

然后我们想当点击热点区域时,使这个区域的颜色同图中的文本框颜色相同

我们加上如何代码

function DealMD(v)
{
        var data = $(v).data('maphilight') || {};
   data.fill=true;
   data.fillColor =$("#color").val();  填充颜色
  data.fillOpacity=$("#opacity").val(); 填充颜色透明度
data.stroke=true; 是否有边框
data.strokeColor=$("#color").val();
data.strokeOpacity=0;
data.strokeWidth= 1;
data.fade=true;
data.alwaysOn=true; 表示总显示
data.neverOn=false;
data.groupBy= false
            $(v).data('maphilight', data); 改变v(也就是点击区域)区域的高亮数据
$('.map').maphilight(); 刷新下

}
</script>