title: jQuery image preview in another div
body: <p>I'm using this script to preview an thumbnail in full size: <a href="http://cssglobe.com/lab/tooltip/02/" rel="nofollow">http://cssglobe.com/lab/tooltip/02/</a></p>
  
  <p>This is the HTML:</p>
  
  <pre><code>&lt;a href="image_big.jpg" class="preview"&gt;&lt;img src="image_small.jpg" style="width: 140px;" /&gt;&lt;/a&gt;
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre><code>#preview{
      position:absolute;
      border:1px solid #ccc;
      background:#333;
      padding:2px;
      display:none;
      color:#fff;
      }
  </code></pre>
  
  <p>And js:</p>
  
  <pre><code>this.imagePreview = function(){ 
  
          xOffset = 100;
          yOffset = 30;
  
  
      $("a.preview").hover(function(e){
          this.t = this.title;
          this.title = "";    
          var c = (this.t != "") ? "&lt;br/&gt;" + this.t : "";
          $("body").append("&lt;p id='preview'&gt;&lt;img src='"+ this.href +"' alt='Image preview' /&gt;"+ c +"&lt;/p&gt;");                                
          $("#preview")
              .css("top",(e.pageY - xOffset) + "px")
              .css("left",(e.pageX + yOffset) + "px")
              .fadeIn("fast");                        
      },
      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");
      });         
  };
  
  $(document).ready(function(){
      imagePreview();
  });
  </code></pre>
  
  <p>But I want the preview to hold still and be displayed in another div like:</p>
  
  <pre><code>&lt;div id="left"&gt;
  &lt;img src="image_small.jpg" style="width: 140px;" /&gt;
  &lt;/div&gt;
  
  &lt;div id="right"&gt;
  &lt;a href="image_big.jpg" class="preview"&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Without the image moving (offset). Any ideas?</p>