图像叠加和更改下拉选择？ [英] image overlay and change on dropdown selection?

问题描述

我想制作这种类型的东西，您可以选择前后台并一起显示。 ： https://www.control4.com/solutions/products/switches

我明白有些东西可能会丢失，我试图环顾四周。我会很感激任何帮助。非常感谢。

 < div class =foreground> 
< h4>按钮颜色< / h4> 
 < option value =switch / button / white.pngselected> White< / option> 
  < option value =switch / button / lightalmond.png> Light Almond< / option> 
 < option value =switch / button / black.png>黑色< / option> 
 < option value =switch / button / aluminum.png>铝< / option> 
< / select> 
< / div> 
< br> 
< div class =background> 
< h4>面板颜色< / h4> 
 < option value =switch / faceplate / white.pngselected> White< / option> 
  < option value =switch / faceplate / lightalmond.png> Light Almond< / option> 
 < option value =switch / faceplate / black.png>黑色< / option> 
< option value =switch / faceplate / midnightblack.png>午夜黑< /选项> 
< option value =switch / faceplate / aluminum.png>铝< / option> 
<选项值=开关/面板/ satinnickle.png>缎面镍< /选项> 
< option value =switch / faceplate / bronze.png> Venetian Bronze< / option> 
< option value =switch / faceplate / stainlesssteel.png>不锈钢< / 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> 
  

解决方案

如果您注意到，那些图片是png且相同具有完全定位的开关和背景的尺寸。因此在另一个div中显示一个div将完全重叠，如下面的代码片段所示：

使用jQuery的东西，应该让你去......

.back {background：url（https://www.control4.com/files/large/805347005e9b7ee87d4da29d56c9fa44 .PNG）; height：575px;宽度：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>< /脚本>< DIV> < select id =switchSel> < option value =black>黑色< / option> < option value =brown> brown< / option> < / select>< / div>< div class =switch black> < div class =back> < / div>< / div>

I'd like to make something of this kind where you can select the fore and background and make it display together. : https://www.control4.com/solutions/products/switches

I do understand some things could be missing and I have tried to look around. I'd appreciate any help. Many thanks.

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

解决方案

If you notice, those images are png and of same dimensions with perfectly positioned switch and background. so displaying one div inside another will overlap it perfectly as the snippet below

Something with jQuery, should get you going....

$(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>

这篇关于图像叠加和更改下拉选择？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！