jquery - jQueryで画像のsrcを動的に変更する

Question

画像の色を変更するプロジェクトに取り組もうとしています。画像の領域ごとに色を変更できます。

ここにHTMLがあります

<div id="name">Title</div>

<div id="imageholder">
   <div class="holder"><img src="images/foldername/ar000.png" id="layer_a" /></div>
   <div class="holder"><img src="images/foldername/br000.png" id="layer_b" /></div>
   <div class="holder"><img src="images/foldername/cr000.png" id="layer_c" /></div>
   <div class="holder"><img src="images/foldername/dr000.png" id="layer_d" /></div>
   <div class="holder"><img src="images/foldername/empty.png" id="layer_map" usemap="#imgmap" /></div>
</div>

<map name="imgmap">
   <area shape="poly" id="c" class="map" coords="1,1,1,1,1" href="#" />
   <area shape="poly" id="d" class="map" coords="2,2,2,2,2" href="#" />
   <area shape="poly" id="a" class="map" coords="3,3,3,3,3" href="#" />
   <area shape="poly" id="a" class="map" coords="4,4,4,4,4" href="#" />
   <area shape="poly" id="b" class="map" coords="5,5,5,5,5" href="#" />
</map>

<div id="color">
   <img src="images/image1.jpg" id="r001" class="swatch"/></div>
   <img src="images/image2.jpg" id="r002"class="swatch"/></div>
   <img src="images/image3.jpg" id="r003" class="swatch"/></div>
   <img src="images/image4.jpg" id="r004"class="swatch"/></div>
   ......
</div>

<input name="currentpart" id="currentpart" type="hidden" value="" />

画像パーツ (layer_a から layer_d) を重ねて 1 つの画像を作成します。「layer_map」には、マップが描画される空白の png 画像が含まれています。

ユーザーは最初に画像フォーム「imageholder」のマップの 1 つをクリックし、次に「color」の画像の 1 つをクリックすると、「class="holder」の画像が変更されます。

ここにjQueryコードがあります

// retrieves the image title //
var name = $("#name").text();
// on clicking the mapped areas //
('#imgmap area').click(function(){
    var idmap = $(this).attr('id');
// trying to put the selected area id into a hidden field //
    $("input[name='currentpart']").val(this.idmap);
});

// on choosing what color to change //
$('#color img').click(function(){
// trying to capture the stored id //        
   var mapcurrent = $("input[name='currentpart']").val();
// trying to create the id of the layer inside imageholder div//
   var imgid = "layer_"+ mapcurrent;
// geting the id of the clicked image in color div //
   var id = $(this).attr('id');
// replaces the image in the require layer //
   imgid.attr('src', "images/"+ name +"/"+ mapcurrent + this.id +".png");

マップ"id=a"をクリックしてから、色"id=r002"をクリックするとします。これを行うと、「id=layer_a」src を持つイメージホルダー内の img が 「images/Title/ar002.png」に変更されます。

それは私が達成しようとしていることですが、うまくいきません:(