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

Here is an article that tries to do the same thing you want:

http://rhizohm.net/irhetoric/blog/87/default.aspx

Answer 2

Check out:

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

Example:

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

<script type="text/javascript">
$(".button").mouseenter(function()
{
    var position = $(this).position();

    $("#dot").css("left", position.left+10).
             .css("top", position.top+5)
             .show();
}).mouseleave(function()
{
    $("#dot").hide();
});
</script>