javascript - Move an image according to the mouse cordinates using jquery - Stack Overflow

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?

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?

• javascript
• jquery
• html
• mouse-position
• whiteboard

Share Improve this question Follow edited Jul 18, 2011 at 13:25 Mo Valipour 13.5k1313 gold badges6363 silver badges8787 bronze badges asked Jul 18, 2011 at 13:23 esafwanesafwan 18.1k3535 gold badges110110 silver badges170170 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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

This has actually been done with tutorial included with Node.js and websockets. (note, you may not actually see any other cursors as that post is quite old, but you may be able to see yourself by using another puter/browser).

You say you want to use PHP, and you can probably port his node.js code to php. Here is a library to help with websockets in php.

Create an image on the page with the whiteboard on the viewers browser. Set the image style to position:absolute and from javascript set the top and left properties acording to the position from the presenters mouse. Use setInterval to make a javascript call to the server and obtain the presenters mouse position. At the presenters puter you need to use setInterval as well to save the mouse position on the server.