title: Image Preview on hover in jquery
body: <p>Below is my code for an image preview on hover. It preview the image in the original size which I don't want.</p>
  
  <p>I'd like to have the previews be a fixed width, say 300px. How do I do that?</p>
  
  <p>Here is my code:</p>
  
  <pre><code> this.imagePreview = function(){    
      /* CONFIG */
  
          xOffset = 10;
          yOffset = 30;
  
          // these 2 variable determine popup's distance from the cursor
          // you might want to adjust to get the right result
  
      /* END CONFIG */
      $("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");
  
      });         
  };
  </code></pre>