关于js获取元素的一个小问题，求教
说那么多不如我直接上一段HTML：

HTML code

<div class="peoples" onmouseover="mouseover();">
        <ul>
            <li><img src="images/head.png" alt="" /></li>
            <li><img src="images/head.png" alt="" /></li>
        </ul>
         <ul>
            <li><img src="images/head.png" alt="" /></li>
            <li><img src="images/head.png" alt="" /></li>
        </ul>
</div>

/*这里有一个隐藏div*/
<div id="box"
    style="background: rgb(255,102,0);visibility: hidden; height:50px;width:50px;position:absolute;z-index: 30;">
    </div>

现在的问题是， 我想要在鼠标指到相应的图片上面 动画弹出那段div，div的动画效果也做好了，mouseover时间也弄好了，但是就是不太明白怎么搞（我的想法是：获取img的位置，然后赋个div的position？），哎，知识太少了，求教啊


------解决方案--------------------
应该是通过event获取鼠标的位置吧 然后给div设top left
------解决方案--------------------
js代码呢？？
我写一个吧：
function mouseover()
{
var obj=docment.getElementById('box');
obj.style.visibility='visible';
}
只是把div显示出来了，你的要求说的不清楚，不晓得弹出时你对弹出的div有什么设计
------解决方案--------------------
function mouseover(){
var a=document.getElementById("box");
a.style.left=event.clientX+"px";
a.style.top=event.clientY+"px";
a.style.visibility="visible";
}
？？把隐藏设成透明然后逐渐显示？？
------解决方案--------------------
img.offsetLeft
img.offsetTop