Currently, I have two images in my web project...
function transformImage(el) {
if (el.className == "front") {
el.className = "back";
getElementById("right").className = "right1";
} else {
el.className = "front";
getElementById("right1").className = "right";
}
}.front {
position: absolute;
bottom: 370px;
opacity: .5;
}
.right {
position: absolute;
bottom: 370px;
left: 1637px;
opacity: .5;
}
.back {
position: absolute;
bottom: 370px;
left: 500px;
opacity: 1;
}
.right1 {
position: absolute;
bottom: 370px;
left: 1137px;
opacity: 1;
}<img src="img.png" width="290" height="228" id="front" class="front" onclick="transformImage(this)">
<img src="img.png" width="290" height="228" id="right" class="right" onclick="moveRight(this)">I am currently working on modifying these images by changing their classes when clicked. Here's a sample of the JavaScript code:
The ultimate goal is to alter both images with new CSS properties as displayed below:
When implemented correctly, both images are expected to move and adjust their opacities. Unfortunately, only the image tagged with the "front"/"back" class seems to be responding while the "right"/"right1" image remains unchanged. It appears that there might be an issue with my JavaScript, but I'm not sure where the problem lies. Any guidance on this matter would be highly appreciated!
This is my initial attempt at writing code, so I appreciate your patience if I'm missing something obvious.
Thank you for your time and assistance! :)