move an image to the mouse position in html/javascript - Javascript DOM HTML Element

Javascript examples for DOM HTML Element:Image

  1. HOME
  2. Javascript
  3. DOM HTML Element
  4. Image

Description

move an image to the mouse position in html/javascript

Demo Code

ResultView the demo in separate window 

<html>
   <head></head>
   <body> 
      <img id="avatar" src="http://www.java2s.com/style/download.png" style="position:absolute;">  
      <script lang="javascript">
function updateAvatarPosition( e )
{
    var avatar = document.getElementById("avatar");
    avatar.style.left = e.x + "px";
    avatar.style.top = e.y + "px";
    console.log( "e( " + e.x + ", " + e.y + " )" );
    console.log( "avatar( " + avatar.x + ", " + avatar.y + " )" );
}
document.onmousemove = updateAvatarPosition;

      </script> 
   </body>//from ww  w.  ja va2 s  .  c o  m
</html>

Related Tutorials