I'm working on a website where I want to make an interactive feature. When users click on an image on the left side of the page, I want the page to move backward. Similarly, when they click on an image on the right side, I want the page to move forward. Initially, I tried using CSS to achieve this by changing the margin upon mouseover:
<p onmouseover="hoverForward" style="text-indent:-1000px;">
<div id="menu" style="height: 504px; width: 92px; position: absolute; z-index: 2; top: 62px; left: 1353px;">
<img src="image.jpg">
</div></p>
However, this approach did not yield any results. Subsequently, I attempted to implement a JavaScript solution inspired by an example from w3Schools that used onclick event:
function myFunction()
{
document.getElementById("demo").innerHTML="Hello World";
}
<p onmouseover="hoverForward" style="text-indent:-1000px;">
<div id="menu" style="height: 504px; width: 92px; position: absolute; z-index: 2; top: 62px; left: 1353px;">
<img src="image.jpg">
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
</div></p>
In my testing phase, I placed the button directly on the image but found that it did not trigger the desired scroll motion upon clicking. It's puzzling because I believe the initial CSS method should have worked perfectly. Any insights on what could be going wrong would be greatly appreciated. Thanks