Start Building Professional
Web Apps Today

Image position in a grid


I have a grid in which one of its columns has images. I have wired the onclick event of the images to a function which would display some text as a pop up right next to the image. The problem is that i am not able to get the position of the image element in the grid cell. Here is the code i am using:

<cell><![CDATA[ <img src = 'Images/30373.gif' onclick = 'showText(this);' /> ]]></cell> ------------------------ XML data


<div id="divTxt" style="display: none; width: 250px;border: solid 1px #CCCCCC; background-color: #FFFFFF; padding: 5px;">
</div> ------------------------------------------------------ This is the code for the popup div


function showText(img) ---------------------------------Here is the function which is supposed to show the pop up next to the image
{
var txt = $get("divTxt");
txt .innerHTML = mygrid.cells(id,7).getValue();
var imgOffsetTop = img.offsetTop;
var imgOffsetLeft = img.offsetLeft;
txt .style.top = imgOffsetTop + 18;
txt .style.left = img.offsetLeft + 20;
prevNotes.style.visibility = "Visible";
}

For each image in the grid offsetTop and offsetLeft are always coming out as 1 and 32. How can i get the actual position of the image element on the page??

You can use inner method of grid, which will calculate position of elements

var pos=mygrid.getPosition(img);
txt .style.top = pos[1] + 18+"px"; 
txt .style.left = pos[0] + 20+"px";