jquery实现图片提示效果，鼠标移动到图片上市tooltip，求教大虾！！

求哪位大虾指教一二，错误在哪里？？？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery图片提示效果</title>
<style type="text/css">
  ul li{
  float:left;
  padding:10px;
  list-style-type:none;
  }
#tooltip{
border:1px solid #cccccc;
background:#9900CC;color:#fff;
  padding:5px;
  display:none;
  position:absolute;}
</style>
<script src="jquery.min.js" src="jquery-1.2.3.js"></script></head><body>
   <ul>
      <li><a href="1.JPG" class="tooltip" title="风景1"><img src="1.JPG" alt="风景1" width="100px" height="100px" /></a></li>
  <li><a href="2.JPG" class="tooltip" title="风景2"><img src="2.JPG" alt="风景2"  width="100px" height="100px"/></a></li>
  <li><a href="3.JPG" class="tooltip" title="风景3"><img src="3.JPG" alt="风景3"  width="100px" height="100px"/></a></li>
  <li><a href="4.JPG" class="tooltip" title="风景4"><img src="4.JPG" alt="风景4"  width="100px" height="100px"/></a></li>
  <script type="text/javascript">
  $(function(){
      var x=10;
  var y=20;
  $("a.tooltip").mouseover(function(e){
     this.mytitle=this.title;
this.title="";
var imgtitle=this.mytitle?"<br/>"+ this.mytitle : "";
var tooltip="<div id='tooltip'><img src='"+this.href+"' alt='产品预览图'/>"+imgtitle+"</div>";
$("body").append("tooltip");
$("#tooltip").css({
   "top": (e.pageY+y) + "px",
   "left": (e.pageX+x) + "px"
}).show("fast");
  }).mouseout(function(e){
    this.title=this.mytitle;
$("#tooltip").remove();
  }).mousemove(function(e){
    $("#tooltip").css({
    "top": (e.pageY+y) + "px",
   "left": (e.pageX+x) + "px"
});
  });
  })
</script>
   </ul>
</body>
</html>

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

给个插件：
http://flowplayer.org/tools/tooltip/index.html
学习基础知识？还用jquery？？？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery图片提示效果</title>
<style type="text/css">
  ul li{
  float:left;
  padding:10px;
  list-style-type:none;
  }
</style>
</head><body>
  <ul>
  <li><a href="a.jpg" class="tooltip" title="风景1"><img src="a.jpg" alt="风景1" width="100px" height="100px" /></a></li>
<li><a href="a.jpg" class="tooltip" title="风景2"><img src="a.jpg" alt="风景2" width="100px" height="100px"/></a></li>
<li><a href="a.jpg" class="tooltip" title="风景3"><img src="a.jpg" alt="风景3" width="100px" height="100px"/></a></li>
<li><a href="a.jpg" class="tooltip" title="风景4"><img src="a.jpg" alt="风景4" width="100px" height="100px"/></a></li>
</ul>
  <script type="text/javascript">
    var imgs=document.getElementsByTagName("a");
var tooltip=document.createElement("div");
var top=10;
    document.body.appendChild(tooltip);
for(var i=0;i<imgs.length;i++){
    imgs[i].onmouseover=function(){
            var _this=this;
// alert(_this.offsetLeft+10);
    tooltip.innerHTML=_this.title;
tooltip.style.position="absolute";
            tooltip.style.left=_this.offsetLeft+10+"px";
tooltip.style.top=top+"px";
}
imgs[i].onmouseout=function(){tootip.style.display="none"}
}
</script>
</body>
</html>
试一下，凑合用吧。。
感谢5楼提供的DOM源码。可是我那个到底错在哪了！郁闷中
粗心的人啊   $("body").append("tooltip");改成$("body").append(tooltip);
还有 <script src="jquery.min.js" src="jquery-1.2.3.js"></script> 这个写法kb的，而且jquery版本太低