Switching images with CSS buttons-CodePudding

this is probably pretty basic stuff but when i've tried searching for the answer nothing has quite been what i'm looking for. hopefully this isn't a duplicate anyway.

i don't necessarily want to make a slideshow. i want to have a few buttons that can switch between images, without a sliding animation. the point is to be able to switch between a few different reference images for a character's design.

i'll include the section of code related to this that i have as a stand-in, just there to get the look/feel right. it'll give an idea of what i'm looking for design-wise but is by no means functional. it also doesn't have any images at the moment.

* {
  box-sizing: border-box;
}

body {
  font-family: Roboto, sans-serif;
  font-size: 16px;
}

.content {
  position: absolute;
  width: 950px;
  left: 50%;
  margin-left: -475px;
}

.bottom-grid {
  display: grid;
  grid-template-columns: 50px 500px 1.5fr;
  grid-template-rows: auto auto;
  gap: 2px;
  background-color: mediumorchid;
  grid-auto-flow: row;
  grid-template-areas: "buttons design extras" "relationships relationships relationships"
}

.bottom-grid>div {
  margin: 3px;
}

.buttons {
  grid-area: buttons;
  padding: 5px;
  background-color: paleturquoise;
}

.design {
  grid-area: design;
  padding: 5px;
  background-color: paleturquoise;
}

.extras {
  grid-area: extras;
  padding: 5px;
  background-color: paleturquoise;
}

.relationships {
  grid-area: relationships;
  padding: 5px;
  background-color: paleturquoise;
}

.btn-group .butt {
  background-color: coral;
  display: block;
  border-radius: 50%;
  border: 1px solid;
  padding: 5px;
  margin-top: 5px;
  text-align: center;
  font-size: 15px;
  cursor: pointer;
  width: 35px;
}

.btn-group .butt:hover {
  background-color: firebrick;
}

<!DOCTYPE html>
<html>

<head>
  <title>buttons</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
</head>

<body>
  <div >
    <div >
      <div >
        <div >
          <div >b1</div>
          <div >b2</div>
          <div >b3</div>
          <div >b4</div>
        </div>
      </div>
      <div >design</div>
      <div >extras</div>
      <div >relationships</div>
    </div>
  </div>
</body>

</html>

for the time being i don't have JS for this stuff, but i have used it elsewhere for the page, so i'm fine with using it here. i've yet to touch JQuery.

what's the best way to implement what i want?

CodePudding user response：

Add this inside div.

<img id="imageSlot" src="" alt="" />

Then, add this script:

<script>
  const imageSlot = document.getElementById('imageSlot');
  const buttons = document.querySelectorAll('.butt');

  const images = [
    { id: 'b1', url: 'https://picsum.photos/200/200?random=1' },
    { id: 'b2', url: 'https://picsum.photos/200/200?random=2' },
    { id: 'b3', url: 'https://picsum.photos/200/200?random=3' },
    { id: 'b4', url: 'https://picsum.photos/200/200?random=4' },
  ];

  buttons.forEach((button) => {
    button.addEventListener('click', changeImage);
  });

  function changeImage(e) {
    const target = e.target.textContent;
    imageSlot.src = images.find((img) => img.id === target).url;
  }
</script>

Replace all urls with your image link:

{ id: 'b1', url: 'https://picsum.photos/200/200?random=1' }

Try with Codepen.io

CodePudding user response：

To reuse it, your will need to make a few tweaks to by changing the button id and proper adding or removing javascript if statements

Codepn Example

<!DOCTYPE html>
<html>

<head>
  <title>buttons</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
  <style>
  * {
  box-sizing: border-box;
}

body {
  font-family: Roboto, sans-serif;
  font-size: 16px;
}

.content {
  position: absolute;
  width: 950px;
  left: 50%;
  margin-left: -475px;
}

.bottom-grid {
  display: grid;
  grid-template-columns: 50px 500px 1.5fr;
  grid-template-rows: auto auto;
  gap: 2px;
  background-color: mediumorchid;
  grid-auto-flow: row;
  grid-template-areas: "buttons design extras" "relationships relationships relationships"
}

.bottom-grid>div {
  margin: 3px;
}

.buttons {
  grid-area: buttons;
  padding: 5px;
  background-color: paleturquoise;
}

.design {
  grid-area: design;
  padding: 5px;
  background-color: paleturquoise;
}

.extras {
  grid-area: extras;
  padding: 5px;
  background-color: paleturquoise;
}

.relationships {
  grid-area: relationships;
  padding: 5px;
  background-color: paleturquoise;
}

.btn-group .butt {
  background-color: coral;
  display: block;
  border-radius: 50%;
  border: 1px solid;
  padding: 5px;
  margin-top: 5px;
  text-align: center;
  font-size: 15px;
  cursor: pointer;
  width: 35px;
}

.btn-group .butt:hover {
  background-color: firebrick;
}
  </style>
</head>

<body>
  <div >
    <div >
      <div >
        <div >
          <div  id="b1" onclick="changeImage(this.id,'https://picsum.photos/id/1/200')">b1</div>
          <div  id="b2" onclick="changeImage(this.id,'https://picsum.photos/id/2/200')">b2</div>
          <div  id="b3" onclick="changeImage(this.id,'https://picsum.photos/id/3/200')">b3</div>
          <div  id="b4" onclick="changeImage(this.id,'https://picsum.photos/id/4/200')">b4</div>
        </div>
      </div>
      <div >design<br>
      <img alt="" src="" id="imageBox" />
      <p id="messageBox"> </p>
      </div>
      <div >extras</div>
      <div >relationships</div>
    </div>
  </div>

<script language="javascript">
    function changeImage(buttonID,imageLink) {

        if (buttonID == "b1") {
            document.getElementById("imageBox").src = imageLink;
        } else if (buttonID == "b2") {
            document.getElementById("imageBox").src = imageLink;
        } else if (buttonID == "b3") {
            document.getElementById("imageBox").src = imageLink;
        } else if (buttonID == "b4") {
            document.getElementById("imageBox").src = imageLink;
        } 
    }
</script>

</body>
</html>