下拉顯示圖像

我對代碼非常陌生，但我想知道我應該使用此代碼指示什麼方向。我將在下拉菜單中選擇一種顏色，並在預覽框中顯示圖像。我需要在預覽框中同時顯示每個color1 color2和color3圖像。當其他顏色被挑選時，他們也需要能夠改變。如果任何人都可以給某種方向，這將是真棒:)哦，我也有我的圖像中的精靈下拉顯示圖像

這裏設置的是代碼，我到目前爲止有：

<style> 
    * { margin: 0; padding: 0; box-sizing: border-box; } 
    #preview { 
     display: block; 
     width: 270px; 
     height: 270px; 
     border: 1px solid black; 
    } 

</style>

<div id="preview"> 
    <img id="image" src="image.png" /> 
</div> 

<form action="" id="opts"> 
    <label for="color1">Front Color</label> 
    <select name="color1" id="color1"> 
     <option value="white" selected="">white</option> 
     <option value="black">black</option> 
     <option value="red">red</option> 
     <option value="blue">blue</option> 
     <option value="gold">gold</option> 
     <option value="pink">pink</option> 
     <option value="purple">purple</option> 
    </select> 
    <br> 
    <label for="color2">Middle Color</label> 
    <select name="color2" id="color1"> 
     <option value="white">white</option> 
     <option value="black">black</option> 
     <option value="red">red</option> 
     <option value="blue">blue</option> 
     <option value="gold">gold</option> 
     <option value="pink">pink</option> 
     <option value="purple">purple</option> 
    </select> 
    <br> 
    <label for="color3">Back Color</label> 
    <select name="color3" id="color1"> 
     <option value="white">white</option> 
     <option value="black">black</option> 
     <option value="red">red</option> 
     <option value="blue">blue</option> 
     <option value="gold">gold</option> 
     <option value="pink">pink</option> 
     <option value="purple">purple</option> 
    </select> 
</form> 

<script> 

     function setcolor1() { 
      var img = document.getElementById("image"); 
      img.src = this.value; 
      return false; 
     } 
     document.getElementById("color1").onchange = setcolor1; 
     } 

</script>

來源

2014-10-17 Jessi

我建議你寫JS或jQuery（無論你喜歡什麼）來改變onhover或onclick的背景顏色，這樣你的圖像看起來像用戶點擊顏色按鈕的不同顏色。按鈕改善了UX（用戶體驗），並且感覺比在選項列表中漫步更好。

而且

#preview { 
display: block; 
width: 270px; 
height: 270px; 
border: 1px solid black; 
}

是不好的響應性網頁設計/開發

相反，你應該把以下內容：

html 
{ 
width:100%; 
} 

#preview 
{ 
width:10.5% (this percentage may change depending on how big you want this to cover your page) 
max-width:100%; 
}

來源

2014-10-17 03:38:17 CuriousDev

我想使用jquery就可以解決這個。你有對所有選擇框使用相同的ID需要更改。我建議使用類似於以下的代碼 -

**html** 

<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
</head> 
<div id="preview"> 
    <img id="image" src="image.png" /> 
</div> 

<form action="" id="opts"> 
    <label for="color1">Front Color</label> 
    <select name="color1" id="color1"> 
     <option value="white" selected="">white</option> 
     <option value="black">black</option> 
     <option value="red">red</option> 
     <option value="blue">blue</option> 
     <option value="gold">gold</option> 
     <option value="pink">pink</option> 
     <option value="purple">purple</option> 
    </select> 
    <br> 
    <label for="color3">Back Color</label> 
    <select name="color3" id="color3"> 
     <option value="white">white</option> 
     <option value="black">black</option> 
     <option value="red">red</option> 
     <option value="blue">blue</option> 
     <option value="gold">gold</option> 
     <option value="pink">pink</option> 
     <option value="purple">purple</option> 
    </select> 
</form> 

**css** 
    * { margin: 0; padding: 0; box-sizing: border-box; } 
    #preview { 
     display: block; 
     width: 270px; 
     height: 270px; 
     border: 1px solid black; 
    } 
#image{ 
    width:100px; 
} 

**jquery** 

     $(function(){ 
      $('#color1').change(function() 
      { 
       var e = document.getElementById("color1"); 
       var col = e.options[e.selectedIndex].value; 
       $('#preview').css('color', col); 
       src='a.png'; 
       $('#preview img').attr("src", src); 
     }); 
      $('#color3').change(function() 
      { 
       var e = document.getElementById("color3"); 
       var col = e.options[e.selectedIndex].value; 
       $('#preview').css('background-color', col); 
     }); 

     });

jsfiddle link

來源

2014-10-17 04:09:40 Rasel

下拉顯示圖像

回答

相關問題