admin管理员组

文章数量:1279084

I'm getting slowly back to javascript and I'm a bit lost on basics. I just want to move an image to follow the mouse position. Here is a simple code I've been tweaking for some time without any success :

<html>
<head>

</head>
<body>

<img id="avatar" src="Klaim.png" style="position:absolute;" />
</body>

<script lang="javascript">

function updateAvatarPosition( e )
{
    var avatar = document.getElementById("avatar");
    avatar.x = e.x;
    avatar.y = e.y;

    // alert( "e( " + e.x + ", " + e.y + " )" );    
    // alert( "avatar( " + avatar.x + ", " + avatar.y + " )" );
}

document.onmousemove = updateAvatarPosition;


</script>

</html>

It looks a lot like some tutorials to do this very thing. What I don't understand is that using the alerts (I don't know how to print in the browser's javascript console) I see that avatar.x and y are never changed. Is it related to the way I've declared the image?

Can someone point me what I'm doing wrong?

I'm getting slowly back to javascript and I'm a bit lost on basics. I just want to move an image to follow the mouse position. Here is a simple code I've been tweaking for some time without any success :

<html>
<head>

</head>
<body>

<img id="avatar" src="Klaim.png" style="position:absolute;" />
</body>

<script lang="javascript">

function updateAvatarPosition( e )
{
    var avatar = document.getElementById("avatar");
    avatar.x = e.x;
    avatar.y = e.y;

    // alert( "e( " + e.x + ", " + e.y + " )" );    
    // alert( "avatar( " + avatar.x + ", " + avatar.y + " )" );
}

document.onmousemove = updateAvatarPosition;


</script>

</html>

It looks a lot like some tutorials to do this very thing. What I don't understand is that using the alerts (I don't know how to print in the browser's javascript console) I see that avatar.x and y are never changed. Is it related to the way I've declared the image?

Can someone point me what I'm doing wrong?

  • javascript
  • html
Share Improve this question asked Jun 28, 2011 at 14:32 KlaimKlaim 69.8k36 gold badges135 silver badges190 bronze badges 2
  • 1 I would never try to do this sort of thing in native javascript: since I started using a javascript library, the language has changed for me from a horror to something I use readily. I use prototype/scriptaculous, but there are others. Jquery seems to be the most popular. – Colin Fine Commented Jun 28, 2011 at 15:03
  • I agree and I'm planning to learn JQuerry, but first I had to do this one to show something at my dayjob. It's plete, not code that will change, and it's only for a demo, so it will be trashed anyway. – Klaim Commented Jun 28, 2011 at 15:28
Add a ment  | 

4 Answers 4

Reset to default 4

I think that you don't want to set x and y, but rather style.left and style.top!

avatar.style.left = e.x;
avatar.style.top = e.y;

There is no x and y property for avatar - you should use 'top' and 'left' instead. Also, move the var avatar = document.getElementById("avatar"); declaration outside of the function, as you only need to do this once.

<html>
<head>

</head>
<body>

<img id="avatar" src="Klaim.png" style="position:absolute;" />
</body>

<script lang="javascript">

function updateAvatarPosition( e )
{
    var avatar = document.getElementById("avatar");
    avatar.style.left = e.x + "px";
    avatar.style.top = e.y + "px";

    //alert( "e( " + e.x + ", " + e.y + " )" );    
    //alert( "avatar( " + avatar.x + ", " + avatar.y + " )" );
}

document.onmousemove = updateAvatarPosition;


</script>

</html>

avatar.style.top = e.clientY + 'px';
avatar.style.left = e.clientX + 'px';

本文标签： How to move an image to the mouse position in htmljavascriptStack Overflow

版权声明：本文标题：How to move an image to the mouse position in htmljavascript? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741259867a2367407.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。