圖標mouseover上的圖像預覽

Question

我試圖使用Jquery和Javascript，因此當客戶端鼠標懸停在PageGridView上使用的通用圖標時，它將顯示略微偏離圖標的縮略圖圖像。

我借用了我在Techrepublic上找到的代碼。

CSS使用：

<style type="text/css"> 
    #Fullimg{position:absolute;display:none;z-index:-1} 
    #preview{ 
     position:absolute; 
     border:3px solid #ccc; 
     background:#333; 
     padding:5px; 
     display:none; 
     color:#fff; 
     box-shadow: 4px 4px 3px rgba(103, 115, 130, 1); 
    } 
    pre{ 
     display:block; 
     font-family:Tahoma, Geneva, sans-serif; 
     font-weight:normal; 
     padding:7px; 
     border:3px solid #bae2f0; 
     background:#e3f4f9; 
     margin:.5em 0; 
     overflow:auto; 
     width:800px; 
    } 
</style> 

的Javascript：

<script type="text/javascript" language="javascript"> 
    // Kick off the jQuery with the document ready function on page load 
    $(document).ready(function(){ 
      imagePreview(); 
    }); 
    // Configuration of the x and y offsets 
    this.imagePreview = function(){ 
     xOffset = -20; 
     yOffset = 40; 
    $("a.preview").hover(function(e){ 
    this.t = this.title; 
    this.title = ""; 
     var c = (this.t != "") ? "<br/>" + this.t : ""; 
    $("body").append("<p id='preview'><img src='"+ this.link +"' alt='Image preview' />"+ c +"</p>"); 
    $("#preview") 
     .css("top",(e.pageY - xOffset) + "px") 
     .css("left",(e.pageX + yOffset) + "px"); 
    }, 
    function(){ 
     this.title = this.t; 
     $("#preview").remove(); 
    }); 
    $("a.preview").mousemove(function(e){ 
     $("#preview") 
      .css("top",(e.pageY - xOffset) + "px") 
      .css("left",(e.pageX + yOffset) + "px"); 
    }); 
    }; 
</script> 

圖標：

<asp:Image ID="imgThumbnail" runat="server" ImageURL="~/Images/imgHover.png" ImageAlign="AbsMiddle" ClientIDMode="Static" CssClass="preview" link='<%# String.Format("~/ConvertImage.ashx?FleetID=" + m_oUserInfo.CurrentFleetID + "&VehicleID={0}&picID={1}&picType=PictureThumb&extention={2}", Eval("VehicleID"), Eval("StoredPictureID"), Eval("PictureExtension"))%>'/> 

的代碼也絕對沒有什麼奇怪的是，儘管甚至試圖使它在fiddle工作。近一週來，我一直在我的頭上撞牆，老闆開始討厭我無法工作。

任何幫助或更具代碼效率的方法，將不勝感激。

Answer 1

我更正了代碼中的一些基本部分。這裏是鏈接：http://fiddle.jshell.net/bpVUk/2/ 您可以根據您的需要現在修改。

代碼：

 // Kick off the jQuery with the document ready function on page load 
    $(document).ready(function() { 
     var xOffset = -20; 
     var yOffset = 40; 
     $('.preview').on('mouseover', function (e) { 
      var img = $(this); 
      img.t = img.title; 
      img.title = ""; 
      var c = (img.t != "") ? "<br/>" + img.t : ""; 
      $("body").append("<p id='preview'><img src='" + img.attr('link') + "' alt='Image preview' />" + c + "</p>"); 
      $("#preview").css({ 
       "top": (e.pageY - xOffset) + "px", 
        "left": (e.pageX + yOffset) + "px", 
        'display': 'block', 
      }); 
     }); 
     $('.preview').on('mouseleave', function (e) { 
      $('#preview').remove(); 
     }) 
     });