当鼠标移到小图片时显示大图片图片提示

由于要求要实现当鼠标移到小图片时显示大图片，同学发了一个Jquery给我结果实现了，现在发出来分享一下：

首先得下载一下jquery插件，然后新建一个ToolTip.js文件，在该文件下写入以下代码：

$(function() {
    var x = 10;
    var y = 10;
    $("a.tooltip").mouseover(function(e) {
        this.myTitle = this.title;
        this.title = "";
        var tooltip = "<div id='tooltip'><img src='" + this.href + "' alt='产品预览图' width='250px' height='250px'/><\/div>"; //创建 div 元素
        $("body").append(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();  //移除
    }).mousemove(function(e) {
        $("#tooltip")
   .css({
       "top": (e.pageY + y) + "px",
       "left": (e.pageX + x) + "px"
   });
    });
})
//]]>

在页面导入两个.js文件，

<script src="../javascripts/jquery-1.3.1.js" type="text/javascript"></script>

<script src="../javascripts/ToolTip.js" type="text/javascript"></script>

最后把图片绑定到a标记就可以了：

 <a href="<%#DataBinder.Eval(Container.DataItem,"imageBigUrl") %>" class="tooltip"> //大图片提示
 <asp:ImageButton ID="image1" runat="server" ImageUrl='<%#DataBinder.Eval(Container.DataItem,"imageSmallUrl") %>' Width="50px" Height="50px" /></a>