イメージオーバーレイとドロップダウン選択の変更？

Question

私はあなたが前面と背景を選択して、それが一緒に表示させることができ、この種の何かをしたいのですが。 ：https://www.control4.com/solutions/products/switches

私はいくつかのものが欠落していることができ、私は周りを見しようとしている理解してください。私はどんな助けにも感謝しています。どうもありがとう。

<div class="foreground"> 
    <h4>Button Colour</h4> 
    <select onchange="$('#imageToSwap').attr('src', this.options[this.selectedIndex].value);"> 
     <option value="switch/button/white.png" selected>White</option> 
     <option value="switch/button/snowwhite.png">Snow White</option> 
     <option value="switch/button/biscuit.png">Biscuit</option> 
     <option value="switch/button/lightalmond.png">Light Almond</option> 
     <option value="switch/button/brown.png">Brown</option> 
     <option value="switch/button/black.png">Black</option> 
     <option value="switch/button/midnightblack.png">Midnight Black</option> 
     <option value="switch/button/aluminum.png">Aluminum</option> 
    </select> 
</div> 
<br> 
<div class="background"> 
    <h4>Faceplate Colour</h4> 
    <select onchange="$('#imageToSwap').attr('src', this.options[this.selectedIndex].value);"> 
     <option value="switch/faceplate/white.png" selected>White</option> 
     <option value="switch/faceplate/snowwhite.png">Snow White</option> 
     <option value="switch/faceplate/biscuit.png">Biscuit</option> 
     <option value="switch/faceplate/lightalmond.png">Light Almond</option> 
     <option value="switch/faceplate/brown.png">Brown</option> 
     <option value="switch/faceplate/black.png">Black</option> 
     <option value="switch/faceplate/midnightblack.png">Midnight Black</option> 
     <option value="switch/faceplate/aluminum.png">Aluminum</option> 
     <option value="switch/faceplate/satinnickle.png">Satin Nickel</option> 
     <option value="switch/faceplate/bronze.png">Venetian Bronze</option> 
     <option value="switch/faceplate/stainlesssteel.png">Stainless Steel</option> 
    </select> 
</div> 

<!-- style --> 
    <style type="text/css"> 
    .background { 
     position:absolute; 
     z-index:1; 
     left:125px; 
     top:125px; 
     float: right; 
    } 

    .foreground { 
     position:absolute; 
     z-index:auto; 
     float: left; 
    } 

    #switch{ 
    position: relative; 
    } 
    </style> 

Answer 1

あなたが気付いた場合、これらの画像はPNG形式と完全に位置付けスイッチと背景と同じ寸法です。そうしかし、返信用

$(document).ready(function() { 
 
    $('#switchSel').change(function() { 
 

 
    var switchPic = $('.switch'); 
 
    switchPic.removeClass(); 
 
    switchPic.addClass('switch ' + $(this).val()); 
 
    }) 
 
})

.back { 
 
    background: url(https://www.control4.com/files/large/805347005e9b7ee87d4da29d56c9fa44.png); 
 
    height: 575px; 
 
    width: 361px; 
 
    display: inline-block; 
 
} 
 
.brown { 
 
    background: url(https://www.control4.com/files/large/61ba4092e170c22c3806a930ca7924f5.png); 
 
    height: 575px; 
 
    width: 361px; 
 
} 
 
.black { 
 
    background: url(https://www.control4.com/files/large/251e9a5ac63b46f4acf8b09dbc5e17b7.png); 
 
    height: 575px; 
 
    width: 361px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <select id="switchSel"> 
 
    <option value="black">black</option> 
 
    <option value="brown">brown</option> 
 
    </select> 
 
</div> 
 
<div class="switch black"> 
 
    <div class="back"> 
 
    </div> 
 
</div>