Bun.. it quite hard to explain,, So I will try to put the codes here!
For css I put ( yew put this in style ok remember css )
.click-area {
width: 100%;
display: flex;
justify-content: center;
align-items: flex-end;
gap: 20px;
padding: 20px 0;
margin-bottom: 20px;
}

#swap-target {
width: 400px;
height: auto;
cursor: pointer;
image-rendering: pixelated;
}

Html! This is the first image that will appear telling everyone to click it♪

<div>
<img id="swap-target"
src="image url"
onclick="changeSideImage()"
title="Click me!">
</div>

And for the script! I putted this at the very last! This is where yew put the image that changes ! I just put this

<script>
function changeSideImage() {
var imgElement = document.getElementById('swap-target');
var imageList = [

"Your image url!",
"Your image url!",
"Your image url!"
];

var currentSrc = imgElement.src;
var currentIndex = -1;

for(var i=0; i < imageList.length; i++) {
if(currentSrc.includes(imageList[i])) {
currentIndex = i;
break;
}
}

if (currentIndex === -1 || currentIndex === imageList.length - 1) {
imgElement.src = imageList[0];
} else {
imgElement.src = imageList[currentIndex + 1];
}
}
</script>

I hope it helps!! >///< Yew can always adjust the width of it to yer liking in the css !