customised "a" link redirect to a URL

[neovantage]

Hi geeks,
I am stuck in a JavaScript function. Actually when we take a mouse over the picture it shows tooltip (image and title text). The href is path to the location of image. But what i want to show the tooltip (image and title text) as well as to set the href path to detail page link. I am unable to customized it. Can somebody help me out to fix this issue.
Here is my HTML code

<table width="100%" border="0" cellspacing="3" cellpadding="3">
    <tr><td align="left" valign="middle"><a href="http://bytes.com/images/products/1207730720_lillies.jpg"  class="preview" title="Bunch of Lillies"><img src="http://bytes.com/images/products/1207730720_lillies.jpg" width="75" height="75" alt="Bunch of Lillies" class="img-border" /></a></td></tr>
    <tr><td><a href="products/flowers/bunch-of-lillies" title="Details" class="normal">Bunch of Lillies</a></td></tr>
</table>

here is Javascript file

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

#preview{
	border-radius:5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	position:absolute;
	border:1px solid #ccc;
	background:#333;
	padding:10px;
	display:none;
	color:#fff;
}

here is the LIVE URL

If some one fixed this issue, i will be very grateful to him/her.
Thanks in advance

[acoder]

Give your detail URL an ID and then set the href of the preview link to its href, e.g.

 ... = $("#detailLink").href;

[neovantage]

I assigned the id to my detail URL like this way

<table width="100%" border="0" cellspacing="3" cellpadding="3">
<tr><td align="left" valign="middle"><a href="images/products/n_1279886753.gif" id="detailLink" class="preview" title="Sony DSR-45AP"><img src="images/products/t_1279886752.gif" width="75" height="75" alt="Sony DSR-45AP" class="img-border" /></a></td></tr>
<tr><td><a href="products/vtr-storage/sony-dsr-45ap" title="Details" class="normal">Sony DSR-45AP</a></td></tr>
</table>

But i am unable to understand the detail id href to it's actual href. Where should i assigned that id.

Here is my javascript 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 != "") ? "<br /><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");
	});
};

In above code, this is the line where it assigning preview href.

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

But how can i assigned detail id href to preview link href

[acoder]

Surely the second link should be "detailLink ". This is the href that you want to set the first one to, isn't it?

[neovantage]

No it is'nt. I think you did not get me. Well let me explain my problem again.

Here is my html code

<table width="100%" border="0" cellspacing="3" cellpadding="3">
<tr><td align="left" valign="middle"><a href="images/products/n_1279886753.gif" id="detailLink" class="preview" title="Sony DSR-45AP"><img src="images/products/t_1279886752.gif" width="75" height="75" alt="Sony DSR-45AP" class="img-border" /></a></td></tr>
</table>

The href of above written link is the path of the image which use for preview. But when i clicked on that link then it opens the image.
But what i want that when i clicked on that image it does not open the image instead it takes to the detail page of the product. I have the detail link value but it's href already point to the path of image how can i redirect to it's detail page though i have the detail link value

[acoder]

Add an onclick to change the href to the detail link.