Not a NT comeback

by Kofod

HTML

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css"> <!-- Link to your CSS file -->
</head>
<body>
<div class=content_right_area>
    <img id="bg1" src="https://i.imgur.com/X5BPVhe.png" alt="Background"> <!-- Starting image -->
    <button id="changeButton"><span id="changeText">Change Image</span></button>
    <button id="mirroredButton"><span id="changeText">Mirrored Image</span></button> <!-- Initially hidden -->
    </div>    
</body>
</html>

CSS

#changeButton
{
  position: absolute;
  top: 400px;
  left: 600px;
  background-image: url('https://i.imgur.com/hPwBlxc.png');
  background-color: transparent;
  height: 50px;
  width: 50px;
  border: none;
  background-repeat: no-repeat;
  cursor: pointer;
}

#changeText
{
  visibility: hidden;
}

#mirroredButton
{
  position: absolute;
  top: 400px;
  left: 50px;
  background-image: url('https://i.imgur.com/hPwBlxc.png');
  background-color: transparent;
  height: 50px;
  width: 50px;
  border: none;
  background-repeat: no-repeat;
  cursor: pointer;
  transform: scaleX(-1);
}

JavaScript

document.addEventListener('DOMContentLoaded', function() {
  var changeButton = document.getElementById('changeButton'); // Get the button by its ID
  var mirroredButton = document.getElementById('mirroredButton'); // Get the button by its ID
  var bg1 = document.getElementById('bg1');
  var images = [
  'https://i.imgur.com/X5BPVhe.png', // URL of the first image
  'https://i.imgur.com/ymLT2M4.png', // URL of the second image
  'https://i.imgur.com/bARz7yF.png' // URL of the third image
  ];
  var originalImage = images[0];
  var index = 0; // Starting with the first image
  var lastImage = bg1.src;
  var secondLastImage = "";
  var endImage = images[images.length - 1]; // Get the last image in the array
  
  mirroredButton.style.display = 'none';

  changeButton.onclick = function() {
  secondLastImage = lastImage;
  lastImage = bg1.src; // Store current image before changing
  	index = (index + 1) % images.length; // Increment index and wrap around using modulo
    bg1.src = images[index]; // Update the src of the bg1 image element
    mirroredButton.style.display = 'block';
    if (index < images.length - 1) {
      changeButton.style.display = 'block';
    } else {
      changeButton.style.display = 'none'; // Hide button if it's the last image
    }
 };
 mirroredButton.onclick = function(){
 var temp = bg1.src;
 bg1.src = lastImage; // Set the image to the last used image
 lastImage = secondLastImage;
 secondLastImage = temp;
 
 changeButton.style.display = 'block';
 
 if (bg1.src == originalImage){
 mirroredButton.style.display = 'none';
 }
 }
});