Just starting out with JavaScript and experimenting with creating an event where clicking on an image triggers the movement of another hidden image. The hidden image is positioned off-screen to the left, while there is a table of images in the center of the page. The goal is to have the hidden image slide out from the left when any image in the table is clicked. Currently focusing on learning pure JavaScript without relying on JQuery. Any assistance would be greatly appreciated.
Below is the setup with HTML, CSS, and JavaScript:
HTML for the table:
<table>
<tbody>
<tr>
<td><img onclick="sleepFunction()" src="01.jpg" height="180" width="120"></td>
<td><img src="02.jpg" height="180" width="120"/></td>
<td><img src="03.jpg" height="180" width="290"/></td>
</tr>
<tr>
<td><img src="04.jpg" height="180" width="120"/></td>
<td><img src="05.jpg" height="180" width="120"/></td>
<td><img src="06.jpg" height="180" width="290"/></td>
</tr>
<tr>
<td><img src="07.jpg" height="180" width="120"/></td>
<td><img src="08.jpg" height="180" width="120"/></td>
<td><img src="09.jpg" height="180" width="290"/></td>
</tr>
</tbody>
HTML for the hidden image:
<div class = "sleepImage">
<img src = "sleeping.jpg" width= "490"/>
</div>
CSS styling:
.sleepImage {
float: right;
position: absolute;
top: 108px;
left: -600px;
}
Javascript snippet:
function sleepFunction() {
document.getElementsByClassName("sleepImage")[0].style.left = "300px";
}