Javascript 下拉以显示图像_Javascript_Jquery_Html_Css

Javascript 下拉以显示图像

javascript jquery html css

Javascript 下拉以显示图像,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我对代码非常陌生，但我想知道我应该朝着这个代码的方向走。我将有一个下拉菜单，你可以选择一种颜色和图像将显示在预览框。我需要在预览框中同时显示color1 color2和color3图像。它们还需要能够在选择其他颜色时进行更改。如果有人能给我一些指导的话，那就太棒了：）哦，我也在一个精灵里建立了我的形象以下是我目前掌握的代码： <style> * { margin: 0; padding: 0; box-sizing: border-box; } #preview {

我对代码非常陌生，但我想知道我应该朝着这个代码的方向走。我将有一个下拉菜单，你可以选择一种颜色和图像将显示在预览框。我需要在预览框中同时显示color1 color2和color3图像。它们还需要能够在选择其他颜色时进行更改。如果有人能给我一些指导的话，那就太棒了：）哦，我也在一个精灵里建立了我的形象

以下是我目前掌握的代码：

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

</style>


*{边距：0；填充：0；框大小：边框框；}
#预演{
显示：块；
宽度：270px；
高度：270px；
边框：1px纯黑；
}


正面颜色
白色
黑色
红色
蓝色
金
粉红色
紫色


中色
白色
黑色
红色
蓝色
金
粉红色
紫色


底色
白色
黑色
红色
蓝色
金
粉红色
紫色
函数setcolor1（）{
var img=document.getElementById（“图像”）；
img.src=该值；
返回false；
}
document.getElementById（“color1”）.onchange=setcolor1；
}

我建议您编写JS或jQuery（无论您喜欢哪种），在hover或onclick上更改背景颜色，这样您的图像看起来就像用户单击颜色按钮时的不同颜色。按钮改善了用户体验，比在选项列表中闲逛感觉要好得多

也

不利于响应性web设计/开发

相反，您应该将以下内容：

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%;
}

我认为使用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);
        });

      });

**html**
正面颜色
白色
黑色
红色
蓝色
金
粉红色
紫色


底色
白色
黑色
红色
蓝色
金
粉红色
紫色
**css**
*{边距：0；填充：0；框大小：边框框；}
#预演{
显示：块；
宽度：270px；
高度：270px；
边框：1px纯黑；
}
#形象{
宽度：100px；
}
**jquery**
$（函数（）{
$（'#color1'）。更改（函数（）
{
var e=document.getElementById（“color1”）；
var col=e.options[e.selectedIndex]。值；
$（“#预览”）.css（'color'，col）；
src='a.png'；
$（'#preview img'）.attr（“src”，src）；
});
$（'#color3'）。更改（函数（）
{
var e=document.getElementById（“color3”）；
var col=e.options[e.selectedIndex]。值；
$（'#preview'）.css（'background-color'，col）；
});
});

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%;
}

**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);
        });

      });