Change image x and y co-ordinate on mouse hover

Question

I have one image what I want to is: change its x & y position on mouse move.

for example:

  <div class="mover" id="1"> <IMG SRC="images/buttons1.png" WIDTH=129 HEIGHT=30 ALT="" border="0"/> </div> <div class="mover" id="2"> <IMG SRC="images/buttons2.png" WIDTH=129 HEIGHT=30 ALT="" border="0"/> </div> 

What I want to do is like normal flash menus when my mouse come on " buttons1.png " a blue dot image show in the beginning of button and when mouse leave the " buttons1.png " this blue dot disappear.

I want to repeat same for my both images.

Answer 1

Check out:

• JQuery.position
• JQuery.css
• JQuery.mouseenter and JQuery.mouseleave

Example:

 $(".button").mouseenter(function() { var position = $(this).position(); $("#dot").css("left", position.left+10) .css("top", position.top+5) .show(); }).mouseleave(function() { $("#dot").hide(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="mover" id="2"> <img class="button" src="images/buttons1.png" width="129" height="30"/> <img class="button" src="images/buttons2.png" width="129" height="30"/> </div> <img id="dot" style="display: none; position: absolute;" src="images/blue_dot.png"/>