0

我正在尝试进行图像颜色更改项目。您可以在其中更改图片的每个区域的颜色。

这是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）将相互叠加以创建单个图像。“layer_map”包含绘制地图的空白 png 图像。

用户首先单击图像表单“imageholder”上的一个地图，然后单击“color”中的一个图像，这反过来会更改“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的imageholder内部的img将变为 “images/Title/ar002.png”

这就是我试图实现的目标，但它不起作用:(

4

0 回答 0