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）将彼此叠加以创建单个图像。 “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的img inside imageholder将变为“images / Title / ar002.png”

这就是我想要实现的目标，但它起作用:(

使用jQuery动态更改图像的src

0 个答案: