title: SharePoint 2010: Image preview on hover in New Item Form
body: <p>I've adapted the following code from <a href="http://spjsblog.com/2010/04/29/image-preview-on-hover-over-a-hyperlink-field/" rel="nofollow">spjsblog</a> to work on my SharePoint site. The code is a Jquery script to display images in a preview pane when a user hovers over a link within a list.</p>
  
  <pre><code>&lt;script type="text/javascript" src="../../Javascript/jquery-1.4.2.min.js"&gt;&lt;/script&gt;  
  
  &lt;script type="text/javascript"&gt;  
  
  
  
  function imagePreview(){  
  
  arrOfImageTypes = ['jpg','jpeg','gif','png'];  
  
  $("table.ms-listviewtable td.ms-vb2 a").hover(function(e){  
  
  var href = this.href;  
  var img = href.substring(href.lastIndexOf('.')+1).toLowerCase();  
  
  if(href.indexOf('http')==0 &amp;&amp; $.inArray(img,arrOfImageTypes)&gt;-1){  
  
     $("body").append("&lt;img id='preview' src='"+ this.href +"' alt='Image preview' /&gt;");     
  
  }  
  
   var obj = $("#preview");          
   var offset = $(this).offset();  
   var winHeight = $(window).height();  
   var winWidth = $(window).width();  
   var scrollLeft = $(window).scrollLeft();  
   var scrollTop = $(window).scrollTop();  
   var objHeight = obj.outerHeight();  
   var objWidth = obj.width()+15;  
  
   if(((winWidth+scrollLeft)-offset.left)&lt;objWidth){  
  
        offset.left=((winWidth+scrollLeft)-objWidth);  
  
   }  
  
   var maxHeight = (winHeight+scrollTop)-offset.top;  
  
   if(objHeight&gt;maxHeight){  
  
       if(offset.top-scrollTop&gt;objHeight){  
  
           offset.top=offset.top-objHeight-20;  
  
        }  
  
       height = (objHeight&lt;winHeight)?objHeight:winHeight;  
  
    }                              
  
    obj.css({"position":"absolute","top":(offset.top+20)+"px","left":offset.left+20}).fadeIn("fast");                          
  
   },  
  
   function(){  
  
       $("#preview").remove();  
  
   });           
  
   };  
  
   // Call the script on page load  
  
   $(document).ready(function(){  
  
       imagePreview();  
  
   });  
  </code></pre>
  
  <p> </p>
  
  <p>I'm trying to adapt this further to work for a link I've included in a new item form. The link is to a reference sheet (jpeg) so the user has certain item codes available when filling out a field.</p>
  
  <p>How do I make this code display the preview pane when hovering over the link? I believe the change is somewhere with the 2nd line of the function but I'm not sure how to reference the field within the code.</p>