Picture follow a mouse in a <div>

How can I make a picture follow the mouse in a specific <div>?

I know that I can get the mouse position from e.pageX & e.pageY and开发者_JAVA技巧 with the code document.onmousemove = followmouse;. Run the followmouse function every moment the mouse move in a page and in the followmouse function, set the picture position to the mouse position. For the exact question I asked here (how can I make a picture follow the mouse in a specific <div>), I have this idea:

Get my div top, left, width, and height and do some math and if mouse go out of the div, set visibility:hidden for the picture.

But isn't there any simple way to do this?

Let's assume you have some HTML like this,

<div id="mydiv" style="width: 300px; height: 300px;"></div>
<img id="myimg" style="position: absolute;" alt="" />

then

document.getElementById("mydiv").onmousemove = function(e) {
    document.getElementById("myimg").style.top = e.pageY*1 + 5 + "px";
    document.getElementById("myimg").style.left = e.pageX*1 + 5 + "px";
}

would move your picture to the mouse only if the mouse is over the div.

So long as the picture is actually contained in the div and you move it relative to its normal position, then I think setting overflow:hidden on the containing div should work. When I say "setting", I don't mean every time the mouse moves outside, but just once in the main CSS.