关于js获取元素的一个小问题，求教

Question

说那么多不如我直接上一段HTML：<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？），哎，知识太少了，求教啊

Answer 1

应该是通过event获取鼠标的位置吧 然后给div设top left

Answer 2

js代码呢？？
我写一个吧：
function mouseover()
{
  var obj=docment.getElementById('box');
  obj.style.visibility='visible';
}
只是把div显示出来了，你的要求说的不清楚，不晓得弹出时你对弹出的div有什么设计

Answer 3

这是弹出div的效果：
<div id="box"
    style="background: rgb(255,102,0);visibility: hidden; height:50px;width:50px;position:absolute;z-index: 30;">
    </div> $("#box").animate({height:50},"normal");
                    $("#box").animate({width:255},"normal");

Answer 4

function mouseover(){
var a=document.getElementById("box");
a.style.left=event.clientX+"px";
a.style.top=event.clientY+"px";
a.style.visibility="visible";
}
？？把隐藏设成透明然后逐渐显示？？