problem with offset

problem with offset

<

 html xmlns ="http://www.w3.org/1999/xhtml">

<

 head runat ="server">

< title ></ title >

< style type ="text/css">

.show-tooltip-text

{

 background-color : Blue ;

 font-size : x-large ;

 width : 50px ;

 height : 100px ;

}

 .img-position

{

 position : absolute ;

 left : 300px ;

 top : 300px ;

}

 </ style >

< script type ="text/javascript" src ="../../Scripts/jquery-1.4.1.js">

</ script >

< script type ="text/javascript">

$(document).ready(

 function () {

$(

 '#imgRed' ).each( function () {

 var instance = $( this );

 var title = instance.attr( 'title' );

 var value = "This is for test" ;

$(

 this ).hover( function () {

 var offsets;

imgchange =

'Images/delete-icon.gif' ;

instance.after($(

 '<div id=\'stest\'></div>' ).attr( 'class' , 'show-tooltip-text' ).html(value)).removeAttr( 'value' );

instance.attr({ src: imgchange });

offsets = instance.offset();

$(

 "#stest" , this ).css({ left: offsets.left , top: offsets.top });

},

 function () {

$(

 '#stest' ).fadeOut(400);

 var imgSrc = 'Images/help-red.gif' ;

 //instance.attr('value');

instance.attr({ src: imgSrc });

}

);

});

});

 </ script >

</

 head >

<

 body >

< form id ="form1" runat ="server">

< div >

< img class ="img-position" id ="imgRed" src ="Images/help-red.gif" alt =""/>

</ div >

</ form >

</

 body >

</
html>
 
I'm having problem with offset to place the popupdiv just right side of the image and how to correct the double showing of div with "THis is for test"