Question 177603 in Html Question posted in
Some basic documentation can be found here.

Can I make four images switch when clicked using HTML?

I have 4 individaula images in index.html that have 4 sepereate i.d and create 4 indiviual functions that that switch to another image. I then want to revert back to original images when clicked again. Hope that makes sense.

When the user clicks the front book image it switches to the back of the book, what i need to do is then if the user clicks again it goes back to the front of the book image.

function changeImageFour(image) {
  if (image.src = 'images/pink4back.jpg');
}

function changeImageThree(image) {
  image.src = 'images/pink3back.jpg';
}

function changeImageTwo(image) {
  image.src = 'images/pink2back.jpg';
}

function changeImageOne(image) {
  image.src = 'images/pink1back.jpg';
}
<div class="col-lg-3 text-center">
  <img id="pbook" onclick="changeImageOne(this)" class="imagebooks" src="images/pink1.jpg" alt="">
  <a href="https://www.amazon.co.uk/Pink-Club-Emma-Bruce/dp/B09J7DQWSL"> 
    <button class="bookbutton">Buy Now</button>
  </a>
</div>

<div class="col-lg-3 text-center">
  <img id="pbook" onclick="changeImageTwo(this)" class="imagebooks" src="images/pink2.jpg" alt="">
  <a href="https://www.amazon.co.uk/Dreams-Pink-Club-Emma-Bruce/dp/B0BHMRQR2Q"> 
    <button class="bookbutton">Buy Now</button>
  </a>
</div>

<div class="col-lg-3 text-center">
  <img id="pbook" onclick="changeImageThree(this)" class="imagebooks" src="images/pink3.jpg" alt="">
  <a href="https://www.amazon.co.uk/Pink-Passions-Club-Emma-Bruce/dp/B0BSY7KC5R "> 
    <button class="bookbutton">Buy Now</button>
  </a>
</div>

<div class="col-lg-3 text-center">
  <img id="myImage4" onclick="changeImageFour(this)" class="imagebooks text-center" src="images/pink4.jpg" alt="">
  <a href="https://www.amazon.co.uk/United-Pink-Club-Book-ebook/dp/B0C5P7WDFT"> 
  <button class="bookbutton"> But Now</button>
  </a>
</div>
Tags:

2

Answers


  1. 0

    You are already returning the image with button so you could easily check the name before changing the image for example in image 4 it could be something like this

    function changeImageFour(image) {



if (image.src.endsWith('pink4.jpg')) {
    image.src = 'images/pink4back.jpg';
  } else {
    image.src = 'images/pink4.jpg';
  }
}
    Login or Signup to reply.
  2. 0

    There are a couple of important things to mention:

    • Avoid inline event handlers like onclick. They were the go-to way for adding event listeners when JavaScript was just beginning, but have been superseded by addEventListener for a while now. I’d recommend that you use addEventListener from now on.
    • ID’s have to be unique. Their function is to identify elements by a unique identifier. Use the same ID only once.
    • You can nest a button inside of an achor (<a>) tag, but you shouldn’t. Anchors should be used for navigation and buttons for functionality. Browsers know what to do with each of them individually, but nesting them makes it confusing (is it a link? Or is it a button?). If you want an anchor to look like a button, then CSS is your friend.

    That being said, you don’t have to write a function for each image. Like @salihkavaf showed in your other post, you can store the other image you want to show as a data attribute on your image. When clicking, switch the values from the src and data-src attribute.

    With JS, select all the images that you want to have this behavior and add a click event listener for each one of them. Like you see below, there is just one function for both images. That is because with events we can identify the element that fired the event by checking the information that the event provides us. In this case event.target is a reference to the <img/> element that we clicked. Do the src – data-src switch trick here and all your images will work.

    const images = document.querySelectorAll('.imagebooks');

function changeImage(event) {
  const image = event.target;
  const newImage = image.dataset.src;
  image.dataset.src = image.src;
  image.src = newImage;
  
  event.preventDefault();
}

for (const image of images) {
  image.addEventListener('click', changeImage);
}
    .imagebooks {
  cursor: pointer;
}
    <div class="col-lg-3 text-center">
  <img class="imagebooks" src="https://picsum.photos/200/300" data-src="https://picsum.photos/300/300" alt="">
  
  <a href="https://www.amazon.co.uk/Pink-Club-Emma-Bruce/dp/B09J7DQWSL">Buy Now</a>
</div>

<div class="col-lg-3 text-center">
  <img class="imagebooks" src="https://picsum.photos/400/300" data-src="https://picsum.photos/500/300" alt="">
  
  <a href="https://www.amazon.co.uk/Dreams-Pink-Club-Emma-Bruce/dp/B0BHMRQR2Q">Buy Now</a>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search