通过点击另一个更改div中的图像 - jQuery

Question

我要为产品创建颜色选择器。我有12种颜色选项，因此可以显示12张照片。

我想它看起来像这样的Flash页面：

http://www.renault.co.uk/cars/model/newmeganehatch/colourselector.aspx

我会更喜欢，虽然使用jQuery。

我正在考虑使用div的行来包含颜色，并调用主图片容器中的图像更改颜色单击。

我会更好地堆叠图像和使用显示：无或使用插件如jQuery循环更好吗？

在此先感谢。

编辑以显示代码最新：

<!--The color picker div--> 
<div class="picker p1" data-bkgnd="images/1.jpg"></div> 
<div class="picker p2" data-bkgnd="images/2.jpg"></div> 
<div class="picker p3" data-bkgnd="images/3.jpg"></div> 

<!--The container for the product image--> 
<div class="productdisplay"></div> 

    <script type="text/javascript"> 
    $(document).ready(function(){ 
     $(".picker").click(function(){ 

      //Load background string from data of clicked element 
      var bVal = $(this).data('bkgnd'); 

      //Set display's background to retrieved background string 
      $(".productdisplay").hide('fade').css({'background-image': "url('" + bVal + "')"}).show('fade'); 
     }); 
    }); 
    </script> 

和CSS

.productdisplay { 
height:327px; 
width:590px; 
float:left; 
background-image:url('images/1.jpg'); 
} 
.picker { 
height:50px; 
width:50px; 
float:left; 
} 
.p1 { 
background:#FFF; 
} 
.p2 { 
background:#C4C9C5; 
} 
.p3 { 
background:#988879; 
} 

目前越来越装载BVAL数据到div时“未定义”的网址，不明白为什么。

Answer 1

像这样的东西可以让你开始：

//The color picker div  
<div class="picker" data-bkgnd="/content/images/someimg.jpg"></div> 

//The container for your product image 
<div class="productDisplay"></div> 

<script type="text/javascript"> 


$(document).ready(function(){ 
    $(".picker").click(function(){  
     //Load background string from data of clicked element 
     var bVal = $(this).attr('data-bkgnd'); 
     //Set display's background to retrieved background string 
     $(".productDisplay").hide().css({'background-image': "url(" + bVal + ")"}).show(); 
    }); 
}); 

</script> 

Click here to view the fiddle