html 代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
    <TITLE>图片显示效果</TITLE>
    <SCRIPT SRC="../js/jquery-1.4.2.min.js" TYPE="text/javascript"></SCRIPT>
    <SCRIPT SRC="../js/one.js" TYPE="text/javascript"></SCRIPT>
</HEAD>
<style type="text/css">
  *{ margin:5px; padding:0px;}
  ul li{
  list-style-type: none;        
    display: inline;        
  }
</style>
<BODY>
    <ul>
        <li><a href="C:/WINDOWS/Web/Wallpaper/01.jpg" title="图片1" CLASS="tooltip"><IMG SRC="C:/WINDOWS/Web/Wallpaper/01.jpg" WIDTH="80" HEIGHT="80" BORDER="0" ALT="图片1"></a></li>
  <li><a href="C:/WINDOWS/Web/Wallpaper/02.jpg" title="图片2" CLASS="tooltip"><IMG SRC="C:/WINDOWS/Web/Wallpaper/02.jpg" WIDTH="80" HEIGHT="80" BORDER="0" ALT="图片2"></a></li>
  <li><a href="C:/WINDOWS/Web/Wallpaper/03.jpg" title="图片3" CLASS="tooltip"><IMG SRC="C:/WINDOWS/Web/Wallpaper/03.jpg" WIDTH="80" HEIGHT="80" BORDER="0" ALT="图片3" ></a></li>
  <li><a href="C:/WINDOWS/Web/Wallpaper/04.jpg" title="图片4" CLASS="tooltip"><IMG SRC="C:/WINDOWS/Web/Wallpaper/04.jpg" WIDTH="80" HEIGHT="80e" BORDER="0" ALT="图片4" ></a></li>
    </ul>
</BODY>
</HTML>
JQuery代码：
  $(function(){
    var x=5;
    var y=5;
    $("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='图片1' WIDTH='400' HEIGHT='400' />" +imgTitle+ "</div>"; //创建<div>元素
      $("body").append(tooltip); //将tooltip追加到文档中
      $("#tooltip").css({
        "top" : (e.pageY+y) + "px",
        "left" : (e.pageX+x) + "px"
      }).show("fast");            //设置x坐标和y坐标，并且显示
    }).mouseout(function(){
      this.title=this.myTitle;
      $("#tooltip").remove(); //移除    tooltip    <div> 元素
    }).mouseout(function(e){
      $("#tooltip").css({
        "top" : (e.pageY+y) + "px",
        "left" : (e.pageX+x) + "px"
      });
    });
  })