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.