一个js特效，帮忙完善下，谢谢~


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <style type="text/css">
#outer{
width:490px;
border:1px solid black;
}
ul{
list-style:none;
overflow:hidden;
margin:0;
padding:0;
}
ul li{
cursor:pointer;
height:70px;
width:100px;
float:left;
background:gray;
margin:10px;
border:1px solid black;
text-align:center;
padding-top:30px;
}
#show{
position:absolute;
top:100px;
left:60px;
z-index:2;
display:none;
border:1px solid black;
}
  </style>
 </head> <body>
  <div id="outer">
<h2 align="center">汽车标志大全</h2>
<ul>
<li>宝马</li>
<li>大众</li>
<li>宝马</li>
<li>大众</li>
<li>宝马</li>
<li>大众</li>
<li>宝马</li>
<li>大众</li>
</ul>
  </div>
  <div id="show">
<img src="1.jpg" />
  </div>
 </body>
</html><script type="text/javascript">
function showimg(x,y,z){//x,y分别为坐标,z为图片下标
var box=document.getElementById("show");
bx=x+"px";
by=y+"px";
box.style.left=bx;
box.style.top=by;
box.innerHTML="<img src='"+z+".jpg' />";
box.style.display="block";
}
function reshow(x,y){
var box=document.getElementById("show");
bx=x+"px";
by=y+"px";
box.style.left=bx;
box.style.top=by;
}
window.onload=function(){
var lis=document.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
lis[i].index=i;
lis[i].onmouseover=function(e){
x=e.clientX;
y=e.clientY;
showimg(x,y,this.index);
this.onmousemove=function(e){
x1=e.clientX;
y1=e.clientY;
reshow(x1,y1);
}
}
}
}
</script>这是用来实现鼠标放到相应区域时，显示对应的汽车标志，我实现了当鼠标在同一个li内移动时图片跟着移动的情况，但是如果移动时鼠标放到了标志显示的div上时，图片就不会跟着鼠标动了，谁能帮忙晚上下啊，谢谢了！