下拉显示图像

我对代码非常陌生，但我想知道我应该使用此代码指示什么方向。我将在下拉菜单中选择一种颜色，并在预览框中显示图像。我需要在预览框中同时显示每个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

下拉显示图像

回答

相关问题