Home/ Questions/Q 9176445
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T17:06:36+00:00

I have a website and I would like it to do this: When I

  • 0

I have a website and I would like it to do this: When I click on an image on the left side of the page, the page moves backward and when I click on an image on the right side, the page moves forward. I got everything set up correctly so I tried doing this simply with css, onmouseover move the margin of the page so many pixels to the right or left:

<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>

But that doesn’t give me any result. So I tried using an example from w3Schools for javascript onmouseclick:

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>

I tried just putting the button on the image for the sake of testing it out. The button was there but it didn’t scroll when i clicked it. What did I do wrong? It seems like the first approach I took should have definitely worked.
Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your first snippet won’t work anyway, because it’s not dynamic. Additionaly, text-indent isn’t the best way of handling offsets for block elements. The second one can’t work, because the JavaScript won’t scroll, but output ‘Hello, World’ to the <p id="demo" ...> element.

    Better have a look here:

    http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizontal-page-scrolling-with-jquery/

    That’s a nice way of vertical scrolling with the use of HTML ankers, that will even work with browsers that don’t support or allow JavaScript.

    May that help you?

    • 0