I have two images a left and right button. The left button works great when hovering over it. However, the right button when hovering over it changes the left button to the right button highlighting it. The right button appears to work great just not in the correct position.
As part of troubleshooting I have removing the left image and the right image works perfect on the right side of the screen the way it is supposed to.
Any thoughts? I have tried many different things in troubleshooting the problem but still to no avail.
Here is my code:
<style>
.right-button {
position: fixed;
top: 50%;
right: -325px;
}
.left-button {
position: fixed;
top: 50%;
left: 20px;
}
</style>
<body>
<a href="./search.html" class="left-button"><img src="./img/orig_left_stamp.png" onmouseover="changeImage('./img/left_stamp_on.png')" onmouseout="changeImage('./img/orig_left_stamp.png')" style="width:20%;height:auto;"/></a>
<a href="./index.html" class="right-button"><img src="./img/orig_right_stamp.png" onmouseover="changeImage('./img/right_stamp_on.png')" onmouseout="changeImage('./img/orig_right_stamp.png')" style="width:20%;height:auto;"/></a>
</body>
<script>
function changeImage (newSrc) {
document.querySelector('img').src = newSrc;
}
</script>