How To Get Tag Position

I have a <img> tag in my web page that i use as button.
when user will click on it, i would like to display a hidden <div> just under.

I mean by just under, that next pixel below the <img> should be the top of <div>.
Moreover, the left of <img> should be the left of <div>... like that it will look like aligned.

The challenge is the following one.

my <img> is positioned by CSS file, so it can (but it is not a must) have left and top setup... maybe not.

I did a short test :
if i setup in CSS file the left and top of <img>, a simple click on <img> can not retrieve the left and top of itself.

something like that i did :
function ShowCalendar(id_master)
{
var uleft = document.getElementById(id_master.id).left;
alert("Left : " + uleft);
}

where id_master = id of the <img> as following :
<img id='id_img' class='buttonimg' src='calendar2.gif' ></img>

So how can i solved this issue ?
Moreover, position of this <div> should be in absolute coordinates, to avoid issue in browser Xsing.