SharePoint 2010: Image preview on hover in New Item Form

Question

I've adapted the following code from spjsblog 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.

<script type="text/javascript" src="../../Javascript/jquery-1.4.2.min.js"></script>  

<script type="text/javascript">  



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 && $.inArray(img,arrOfImageTypes)>-1){  

   $("body").append("<img id='preview' src='"+ this.href +"' alt='Image preview' />");     

}  

 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)<objWidth){  

      offset.left=((winWidth+scrollLeft)-objWidth);  

 }  

 var maxHeight = (winHeight+scrollTop)-offset.top;  

 if(objHeight>maxHeight){  

     if(offset.top-scrollTop>objHeight){  

         offset.top=offset.top-objHeight-20;  

      }  

     height = (objHeight<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();  

 });  

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.

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.

Answer 1

For those wondering I figured out how to make this work in a new item form. I changed the following line of code:

$("table.ms-listviewtable td.ms-vb2 a").hover(function(e){  

to

$("td.ms-vb2 a").hover(function(e){