0

製品のカラー ピッカーを作成します。12 色のオプションがあるため、表示する写真は 12 枚です。

この Flash ページのようにしたいと思います。

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

ただし、jQueryを使用することをお勧めします。

色を含めるために div の行を使用し、色をクリックするとメインの画像コンテナー div で画像の変更を呼び出すことを考えています。

画像を積み重ねて display:none を使用する方がよいでしょうか、それとも 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 にロードするときに URL として「未定義」を取得していますが、その理由はわかりません。

4

1 に答える 1

3

このようなものから始めることができます:

//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>

フィドルを表示するには、ここをクリックしてください

于 2012-11-21T14:02:18.517 に答える