Question

所以我创建了这个：

我不是javascript新手，也不是最好的，但是想知道如何创建颜色选择器。滑板的3个部分使用z-index组合在一起。

HTML：

 <div class="container-fluid">
 <div class="row">
           <div class="col-md mbody">
                <div class="article">
                            <p align="left"><strong>Deck</strong></p>
            <img src="BlackButton.png" alt="Black Button" align="left" height="50">
            <img src="WhiteButton.png" alt="White Button" align="left" height="50">
            <img src="BlueButton.png" alt="Blue Button" align="left" height="50">
            <img src="GreenButton.png" alt="Green Button" align="left" height="50">
            <img src="OrangeButton.png" alt="Orange Button" align="left" height="50">
            <img src="RedButton.png" alt="Red Button" align="left" height="50">
            <img src="YellowButton.png" alt="Yellow Button" align="left" height="50">
            <img src="PinkButton.png" alt="Pink Button" align="left" height="50">
            <img src="PurpleButton.png" alt="Purple Button" align="left" height="50">

            <br><br>

            <p align="left"><strong>Trucks</strong></p>
            <img src="BlackButton.png" alt="Black Button" align="left" height="50">
            <img src="WhiteButton.png" alt="White Button" align="left" height="50">
            <img src="BlueButton.png" alt="Blue Button" align="left" height="50">
            <img src="GreenButton.png" alt="Green Button" align="left" height="50">
            <img src="OrangeButton.png" alt="Orange Button" align="left" height="50">
            <img src="RedButton.png" alt="Red Button" align="left" height="50">
            <img src="YellowButton.png" alt="Yellow Button" align="left" height="50">
            <img src="PinkButton.png" alt="Pink Button" align="left" height="50">
            <img src="PurpleButton.png" alt="Purple Button" align="left" height="50">

                        <br><br>

            <p align="left"><strong>Wheels</strong></p>
            <img src="BlackButton.png" alt="Black Button" align="left" height="50">
            <img src="WhiteButton.png" alt="White Button" align="left" height="50">
            <img src="BlueButton.png" alt="Blue Button" align="left" height="50">
            <img src="GreenButton.png" alt="Green Button" align="left" height="50">
            <img src="OrangeButton.png" alt="Orange Button" align="left" height="50">
            <img src="RedButton.png" alt="Red Button" align="left" height="50">
            <img src="YellowButton.png" alt="Yellow Button" align="left" height="50">
            <img src="PinkButton.png" alt="Pink Button" align="left" height="50">
            <img src="PurpleButton.png" alt="Purple Button" align="left" height="50">
            <br><br>

                </div>
           </div>
           <div class="col-md mbody">
                <div class="row">
                     <div class="aside">
                        <img src="Yellow_D.png" id="YellowD" alt="Yellow Deck" align="center">
                        <img src="Red_T.png" id="RedT" alt="Red Truck" align="center">
                        <img src="Blue_W.png" id="BlueW" alt="Blue Wheels" align="center">

                        <img src="transparent_background.png" id="skateBackground" alt="Skate Background" align="center" height="750" width="600";>

                     </div>
                </div>
            </div>

我已经用每种颜色制作了每张图像，只需要切换

文件名：

*Color*_D.png = Deck

*Color*_T.png = Trucks

*Color*_W.png = Wheels

CSS：

#YellowD {
    position: absolute;
    left: 285px;
    top: 110px;
    padding-left:0px;
    z-index:0;
}

#RedT{
    position: absolute;
    left: 285px;
    top: 110px;
    padding-left:0px;
    z-index:1;
}

#BlueW{
    position: absolute;
    left: 285px;
    top: 110px;
    padding-left:0px;
    z-index:2;
}


#skateBackground {
 position:relative;
 padding-left:150px; 
 padding-top:50px; 
 padding-bottom:50px; 
 z-index: -1;

}

任何帮助都值得赞赏，我认为使用onclick和事件侦听器是最好的方法，但是通常即使要完成一个简单的工作也要花费我几个小时。

Answer 1

您可以使用JavaScript动态更改图片。

<script language="javascript">
     function change(id, urltochangeto)
    { 
        document.getElementById(id).src = urltochangeto
     }  
</script>

因此您可以将其添加到按钮：

onclick="change(IMAGE ID, PATH OR URL OF NEW IMG)"

Answer 2

您可以使用javascript和jQuery更改图像

$("#myButton").click(function () {
    img1.show(none);
    img2.show();
});

Answer 3

你快到了。首先，您需要为颜色选择器注册onclick事件。您可以为所有人（例如，车轮，甲板，卡车）使用onclick的单一功能。首先将属性添加到颜色选择器图像中，以便在onclick回调中可以找到被单击的确切属性。还要注册一个onclick事件

    <img src="BlackButton.png" partType="D" col="Black" alt="Black Button" align="left" height="50" onclick="changeColor(event)">

更改下面的ID以包含连续的字符串，因为它们只有1个实例

<div class="aside">
<img src="Yellow_D.png" id="deck" alt="Yellow Deck" align="center">
<img src="Red_T.png" id="truck" alt="Red Truck" align="center">
<img src="Blue_W.png" id="wheel" alt="Blue Wheels" align="center">

<img src="transparent_background.png" id="skateBackground" alt="Skate Background" align="center" height="750" width="600";>

</div>

// callback function for onclick event
function changeColor(event) {
  var type = event.srcElement.attributes.partType.value;
  var color = event.srcElement.attributes.col.value;
  if(type == "D") {
      document.getElementById("deck").src = color + "_D.png";
   }
   // similar for wheels and trucks
}

使用按钮更改图像（也包括图像）-Javascript

3 个答案: