esafwan esafwan - 4 months ago 12
jQuery Question

Move an image according to the mouse cordinates using jquery

I am trying to develop a HTML5 white board. I want the users viewing the board
to know where exactly the presenter is pointing within the screen. I am able to
collect the mouse movements using this jquery function.

But even if i succeed to pass this values
to other clients using php, how can I emulate it? Is it possible to move a small
pointer image, based on the co-ordinates obtained from the presenter?



  1. Is there any functions or snippets from which I cant get started?

  2. Will this be very hardware intensive task that normal people may
    have issue?

  3. Is this the best way to achieve what I am trying to achieve?


Answer

Well you can move the image using .css

such as:

$(window).mousemove(function(event) {
  $("#image").css({"left" : event.pageX, "top" : event.pageY});
});

just set #image to fixed or absolute

  1. above

  2. This is not very hardware intensive at all. As long as you use .css and not .animate

  3. This is probably the easiest and most robust solution