-3

I'm trying to make a script that will change a user's mouse position when they hover over an image, like if I hover over the image, their mouse is dragged lower to a certain text, is there any way to do that?

user3904906
  • 23
  • 3
  • could you add some code please? – Rachel Gallen Jun 26 '16 at 22:59
  • pls search for similar issues on stack overflow, like [http://stackoverflow.com/questions/512528/set-cursor-position-in-html-textbox](http://stackoverflow.com/questions/512528/set-cursor-position-in-html-textbox) – morels Jun 26 '16 at 23:00
  • @morels there is no mention of a textbox, simply an image hover (jump to on image hover) - maybe you should read the question.. – Rachel Gallen Jun 26 '16 at 23:02
  • 1
    you are right @RachelGallen, the pasted linked was wong. The correct (duplicate) link is: [http://stackoverflow.com/questions/4752501/move-the-mouse-pointer-to-a-specific-position](http://stackoverflow.com/questions/4752501/move-the-mouse-pointer-to-a-specific-position) – morels Jun 26 '16 at 23:07
  • @morels your link to q seems to provide answers that suggest it can't be done. I beg to differ – Rachel Gallen Jun 26 '16 at 23:40
  • @RachelGallen it can't or people would hijack your cursor constantly...browser won't allow it. Your answer is misinterpreting OP's intent – charlietfl Jun 27 '16 at 00:00
  • 1
    @charlietfl the OPs question is pretty vague to begin with, I doubt you can definitively state what the OP wants, and I think that the scroll-to-hashtag answer that I have provided will adequately suffice to meet his/her needs – Rachel Gallen Jun 27 '16 at 00:19

1 Answers1

0

Give this a whirl. I've used small images. When you hover on them they'll scroll to different divs of text (not much text in the divs at the mo, but you get the picture)

$(document).ready(function() {
  $(".scroll").hover(function(event) {
    $('html,body').animate({
      scrollTop: $(this.hash).offset().top
    }, 500);
  });
});
#btm {
  background-color: #21b81e;
  width: 50%;
  height: 300px;
}
#mid {
  background-color: #2d80e8;
  width: 50%;
  height: 300px;
}
#tp {
  background-color: #c00;
  width: 50%;
  height: 300px;
}
img {
  width: 25px;
  height: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<body>

  <div>
    <p><a id="top">Hover over an img:</a>
      <a href="#middle" class="scroll"><img src="http://www.musicmatters.ie/images/4.jpg" alt="middle" title="middle"></a>
      <a href="#bottom" class="scroll"><img src="http://www.musicmatters.ie/images/3.jpg" alt="bottom" title="bottom"></a>
    </p>
    <div id="tp">Top</div>
    <p><a id="middle">Hover over an img:</a>
      <a href="#top" class="scroll"><img src="http://www.musicmatters.ie/images/11.jpg" alt="top" title="top"></a>
      <a href="#bottom" class="scroll"><img src="http://www.musicmatters.ie/images/3.jpg" alt="bottom" title="bottom"></a>
    </p>
    <div id="mid">Middle</div>

    <p>
      Hello my name is rachel Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
      <br>
      <strong>Note that this paragraph has no scroll class, so when you hover over the images, it is not scrolled to, but you CAN add a scroll class anywhere (with a hashtag). </strong>
    </p>
    <p><a id="bottom">Hover over an img:</a>
      <a href="#top" class="scroll"><img src="http://www.musicmatters.ie/images/11.jpg" alt="top" title="top"></a>
      <a href="#middle" class="scroll"><img src="http://www.musicmatters.ie/images/4.jpg" alt="middle" title="middle"></a>
      <div id="btm">Bottom</div>
  </div>


</body>

Fiddle

Rachel Gallen
  • 27,943
  • 21
  • 72
  • 81