Changing images using buttons (also images) - Javascript

Question

So I created this:

I'm new to javascript and not the best, but wondering how I can go about creating the color selector. The 3 parts of the skateboard are put together using 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> 

I already made each image in every color and just needs to be switched

Filenames:

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

}

Any help is appreciated, I figure using onclick and event listeners are the best way to go, but it usually takes me hours to even get a simple one working.

Answer 1

You can use javascript and jQuery to change the image

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

Answer 2

You can use JavaScript to change the image dynamically.

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

So you would add this to the button:

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

Answer 3

you are almost there. First of all you'll need to register onclick event for your color selectors. You can have a single function for onclick to be used by all(i.e wheels, decks, trucks). Start by adding attribute to your color selector images so that in your onclick callback you can find out the exact one which was clicked. register an onclick event too

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

Changing ids below to have contant strings as these have only 1 instance

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