jquery hover effect of image
<p>this is my jquery code</p>

<pre><code>this.imagePreview = function(){ 

    xOffset = 8;
    yOffset = 20;

$("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");
});         
};

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

<p>this is html code</p>

<pre><code>&lt;a href="1.png" target="_blank" class="preview"&gt;&lt;img src="1s.png"&gt;&lt;/a&gt;
</code></pre>

<p>this is css code</p>

<pre><code>#preview{
position:absolute;
background:#333;
padding:5px;
display:none;
color:#fff;
}
</code></pre>

<p>all this is in this fiddle 
<a href="http://jsfiddle.net/56wk9/" rel="nofollow">http://jsfiddle.net/56wk9/</a> 
(though i could not find images to fit in this fiddle this code is working fine)</p>

<p>what this code does, it displays an image 1.png on hover on another image 1s.png</p>

<p>but since this code use the image to be displayed as </p>

<pre><code>&lt;a href="1.png" target="_blank" class="preview"&gt; 
</code></pre>

<p>on clicking the base image it opens this enlarged image in a new window.. what instead i want that another website shall be opened not this enlarged image.. when i put the link of webpage it does not show hover effect. </p>

<p>all help is golden.</p>
