How could i make it so that when i press a button the images will switch?

Question

The way i want the gallery page to work is that when the button is pressed, the image will bring the picture to the middle and make it the same CSS(size and white shadow) and then the other images will be with the other CSS (smaller with black shadow)

HTML code:

    <img id="Football" src="https://w-dog.net/wallpapers/3/12/331652870386587/club-stadium-sees-camp-nou-football-game-wallpaper-the-field-camp-nou-barcelona-spain-barcelona-the-player-match-sports-andres-iniesta.jpg" alt="Football">

    <img id="Boxing" src="http://i.lv3.hbo.com/assets/images/sports/boxing/fights/2015-05-02-mayweather-vs-pacquiao/slideshow/mayweather-vs-pacquiao-ss-03-1024.jpg" alt="Boxing">

    <img id="Basketball" src="http://wallpapercave.com/wp/WNc38uX.jpg" alt="Basketball">

CSS code:

#Boxing{
  width:550px;
  height:300px;
  position:absolute; 
  margin-left:-200px;
  margin-top:350px;
  border-radius:10px;
  z-index:-1;
  opacity:0.8;
  box-shadow: 0px 0px 100px black;
}

#Football{
  width:550px;
  height:400px;
  position:relative; 
  margin-left:550px;
  margin-top:300px;
  box-shadow: 0px 0px 50px white;
  border-radius:10px;

}

#Basketball{
  width:550px;
  height:300px;
  position:absolute; 
  margin-left:-900px;
  margin-top:350px;
  border-radius:10px;
  z-index:-1;
  box-shadow: 0px 0px 100px black;
  opacity:0.9;

}

Ok, you could try using a class to determine what it should look like, have a look at [this](https://stackoverflow.com/questions/195951/change-an-elements-class-with-javascript) — gaynorvader, May 24 '17 at 15:52

score 0 · Answer 1 · answered May 24 '17 at 15:53

You're going to have to do some research on JavaScript, there are some topics off to the side here that will help you. It might be easier to use jQuery for something like this.

For instance you probably want to select the button and listen for a press, then when the button listener hears a press it will switch the URL of the image to a different image that you have stored, or you can switch one to display, and the other to display none. I hope this helps!

score 0 · Answer 2 · answered May 24 '17 at 15:56

You can do something like this, where the class .show controls if an image should be shown.

let currImage = 0

const changeImage = _ => {
  const images = Array.from(document.querySelectorAll('#ImgContainer > img'))
  images[currImage].classList.remove('show')
  images[currImage = (currImage+1)%images.length].classList.add('show')
}

#ImgContainer {
  width: 550px;
  height: 300px;
  position: absolute;
  margin: 3em 2em;
  border-radius: 10px;
  box-shadow: 0px 0px 100px black;
}

#ImgContainer > img {width: 100%;height: 100%;position:absolute;top:0;left:0;display: block;margin:0}

#ImgContainer > img:not(.show) {display:none}

#Boxing {
  opacity: 0.8;
}

#Football {
  box-shadow: 0px 0px 50px white;
}

#Basketball {
  opacity: 0.9;
}

<section id="ImgContainer">
  <img id="Football" class='show' src="https://w-dog.net/wallpapers/3/12/331652870386587/club-stadium-sees-camp-nou-football-game-wallpaper-the-field-camp-nou-barcelona-spain-barcelona-the-player-match-sports-andres-iniesta.jpg" alt="Football">

  <img id="Boxing" src="http://i.lv3.hbo.com/assets/images/sports/boxing/fights/2015-05-02-mayweather-vs-pacquiao/slideshow/mayweather-vs-pacquiao-ss-03-1024.jpg" alt="Boxing">

  <img id="Basketball" src="http://wallpapercave.com/wp/WNc38uX.jpg" alt="Basketball">
</section>

<button onclick='changeImage()'>Click Me</button>

Note: Click Run Code Snippet to see the result

score 0 · Answer 3 · answered May 24 '17 at 16:06

Simple answer can be like this. Just add an onclick functionality to the button. Here's your HTML

<img id="Football" src="https://w-dog.net/wallpapers/3/12/331652870386587/club-stadium-sees-camp-nou-football-game-wallpaper-the-field-camp-nou-barcelona-spain-barcelona-the-player-match-sports-andres-iniesta.jpg" alt="Football">

<img id="Boxing" src="http://i.lv3.hbo.com/assets/images/sports/boxing/fights/2015-05-02-mayweather-vs-pacquiao/slideshow/mayweather-vs-pacquiao-ss-03-1024.jpg" alt="Boxing">

<img id="Basketball" src="http://wallpapercave.com/wp/WNc38uX.jpg" alt="Basketball">


<button id="Save">Click Me</button>

Here's how the JS is.

 document.getElementById("Save").onclick  = function() {
document.getElementById('Football').src = 'http://cdn.gsmarena.com/imgroot/reviews/17/htc-u11-galaxy-s8plus/-728x314/gsmarena_002.jpg';
document.getElementById('Boxing').src = 'http://cdn.gsmarena.com/imgroot/news/17/05/samsung-galaxy-s8-dxo/-344x215/gsmarena_001.jpg';
document.getElementById('Basketball').src = 'http://cdn.gsmarena.com/imgroot/news/16/06/zenfone-max-marshmallow/-344x215/gsmarena_001.jpg';
}

Here's the JSfiddle for reference. https://jsfiddle.net/soqrcwhq/

How could i make it so that when i press a button the images will switch?

3 Answers3