Get Co-ordinates of the image onclick of the image

Posted by Venkat | Labels: ,

We discuss about how to get the co-ordinates of the image , while you click on the image at runtime
so using javascript we will get the x and y co-ordinates of the image
so using this we can wirte the text on that image ie: where we clicked on that image.

Already i have posted the article how to write text on image check the GDI Labels

Javascript


<script language="JavaScript">
function point_it(event){

var txtX=document.getElementById('<%= XTextBox.ClientID %>');
var txtY=document.getElementById('<%= YTextBox.ClientID %>');
pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("pointer_div").offsetLeft;
alert(pos_x);


pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("pointer_div").offsetTop;
alert(pos_y);
txtX.value=pos_x;
txtY.value=pos_y;

}
</script&gt;


HTML Code is

img id="pointer_div" onclick="point_it(event)" src ="../Availability/2_type_A.JPG"

X= asp:TextBox ID="XTextBox" runat="server"
Y= asp:TextBox ID="YTextBox" runat="server"

0 comments:

Post a Comment

Thanks for the Comments.

PayOffers.in