javascript實現改變圖片指定地區的顏色

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