javascript实现改变图片指定区域的颜色
来源:互联网 发布:steam上mac游戏推荐 编辑:程序博客网 时间:2024/05/01 17:56
javascript本身无法改变图片的颜色,不过我们可以通过一些技巧来实现一样的效果.
1、首先我们要知道图片哪些区域需要改变颜色,这里我们可以用执点地图的方法来弄
例1:<img src="001-1.jpg" class="map" usemap="#simple"><map name="simple">
<area href="#" shape="poly" onMouseDown="DealMD(this)" coords="22,2,59,31,60,47,49,43,54,103,18,106,0,117,-2,117,-2,12,-4,25,-2,9,7,-4,5,-5,5,0,7,-3,5,-3,9,0,9,0,10,-2,8,-2,12,-2,20,2,21,0,14,-5,17,-4,15,-2,15,-4,17,-5,17,-3,17,-2,17,0,14,1,14,-1,9,-2,13,-5,14,-4,13,-4,7,-1,7,-1,13,0,11,1,13,0,9,0,10,4,10,4,11,0,11,0,9,2,9,2,9,2,9,2,9,2,9,2,9,2,9,2,9,2,9,2,9,2,10,-1,5,-2,18,-1,18,-4,11,-2,7,-2,6,-2,11,12,11,12,16,6,16,6,9,6,5,6,12,1" title="墙" />
<area href="#" onMouseDown="DealMD(this)" shape="poly" coords="154,156,154,197,182,235,280,211,284,158,264,149,263,134,191,134,187,134,187,159,170,142,156,143,156,142" title="沙发" />
例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 type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#fapicker').farbtastic('#color');
});
</script>
这个是图中的文本框<input type="text" id="color" name="color" value="#123456" />
这个就是颜色选择器:<div id="fapicker"></div>
3、有了选择器后我们现在需要改变这两个区域里的颜色
这里我们有个来改变热点地图颜色的JQUERY插件叫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>
好了如果还不明白的话看下下面的完整例子
http://download.csdn.net/source/2875622
- javascript实现改变图片指定区域的颜色
- javascript实现打印指定区域的内容
- javascript改变特殊指定字符的背景颜色
- iphone中模糊图片的指定区域的实现
- 拉伸图片的指定区域
- Android中实现绘制图片指定区域
- 【javascript】——实现桌面背景的颜色改变
- javascript实现页面指定区域打印
- 改变imageView图片的颜色
- processing学习实例(1)点击区域实现颜色改变
- 实现根据RGB改变图片颜色
- javaScript实现随机改变背景颜色
- JavaScript 实现切换图片并且实现了链接随着图片的改变而改变
- 截取指定区域的并保存图片
- 对鼠标移到图片上及离开图片时,图片背景颜色改变的JS实现
- javascript 打印指定区域的内容
- JavaScript截取字符串指定区域的内容
- Android 自定义控件 改变图片颜色来实现类似selector点击更改颜色的效果
- 关于OpenCV1.0的静态编译问题
- PHP 5.3 下载时 VC9、VC6、Thread Safe、Non Thread Safe
- 试衣间协议
- FlexPaper: 一个轻量级的在浏览器上显示各种文档的Flex开源组件
- 急求实例
- javascript实现改变图片指定区域的颜色
- endnote & word
- 我的人生之书
- c# 异常处理 经典代码实例
- test eewayinfo.cap
- VS2010帮助文档的下载和安装
- struct 字节对齐详解
- 【转载】源代码查看工具 Source Navigator 使用心得
- 中文字体在CSS中的表达方式