圖像預覽與jQuery，改變哈弗圖像尺寸

Question

這應該是一個很簡單的問題：

我試圖使用Easiest Tooltip and Image Preview Using jQuery 我試圖用這個example

它是爲我工作的罰款，

我的問題是如何改變懸停圖像尺寸 我的圖片太大（一旦我徘徊在小的顯示在工具提示中的一個），我想將其設置大小爲200px X 200像素 我怎樣才能做到這一點？

這是當前風格：

<style> 
#preview{ 
    position:absolute; 
    border:1px solid #ccc; 
    background:#333; 
    padding:5px; 
    display:none; 
    color:#fff; 
    } 
</style> 

這是JavaScript：

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 != "") ? "<br/>" + this.t : ""; 
     $("body").append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>");         
     $("#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"); 
    });   
}; 


// starting the script on page load 
$(document).ready(function(){ 
    imagePreview(); 
}); 

這是主要的：

<a href="1.jpg" /*class="preview"*/><img src="1s.jpg" alt="gallery thumbnail" /></a> 

Answer 1

添加

#preview img { 
    height:200px; 
} 

或更改

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

到

$("body").append('<p id="preview"><img style="height:200px" src="'+ this.href +'" alt="Image preview" />'+ c +'</p>');         

或

$("body").append('<p id="preview"><img style="width:200px" src="'+ this.href +'" alt="Image preview" />'+ c +'</p>');         

取決於您希望如何限制它