图标鼠标悬停的图像预览

Question

I'm attempting to use Jquery and Javascript so when a client mouseovers a generic icon used on a PageGridView it will display the thumbnail image slightly offset from the icon.

I'm borrowing the code I found on Techrepublic .

CSS Being used:

<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>

Icon:

<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"))%>'/>

The code does absolutely nothing oddly, despite even trying to make it work in a fiddle . I've been beating my head against the wall on this for almost a week and the boss is starting to get annoyed that I can't get it working.

Any help or a more code efficient means of doing this would be greatly appreciated.

Answer 1

I corrected some basic part in the code. Here is the link: http://fiddle.jshell.net/bpVUk/2/ You can modify now as per your needs.

Code:

        // 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();
        })
        });