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.

Anurag Sinha · Accepted Answer · 2019-05-01 03:15:13Z

1

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
}

answered May 1, 2019 at 3:15

Anurag Sinha

1,03210 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tjw Over a year ago

Worked like a charm! I was afraid when I first took on creating this id have to have a change event for every color on each individual button. Exactly why asked before trying. Didn't even think of the color + "_D.png"

marsnebulasoup · Accepted Answer · 2019-05-01 03:15:45Z

1

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)"

edited May 1, 2019 at 3:15

answered May 1, 2019 at 3:08

marsnebulasoup

2,7003 gold badges20 silver badges40 bronze badges

Comments

marc_s · Accepted Answer · 2019-05-01 04:05:58Z

1

You can use javascript and jQuery to change the image

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

edited May 1, 2019 at 4:05

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered May 1, 2019 at 3:13

Óscar Contreras

10513 bronze badges

Collectives™ on Stack Overflow

Changing images using buttons (also images) - Javascript

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related