Extracting XY coordinates to Text Field

Hello all,

I am kinda stuck here since I am not a master at javascript. What I'm trying to do is create a map that allows you to drag & drop the dot anywhere on the image. When the dot is dropped the XY coordinates need to appear in two text fields for that position (where the dot was dropped).

Here is a simple script that allows you to drag objects around on top of a background. Somewhat Similiar to my idea, except the background image should not be moveable and the objects should not be allowed to leave the background's boundaries. Basically, I just need an add-on to this script that will extract the XY coordinates to 2 text fields (x,y) when the object is dropped.

Any advice, web sources, guides, tutorials or any help at all will be greatly appreciated!!!

HERE IS THE ENTIRE SCRIPT I MENTIONED:

<HTML>
<HEAD><TITLE>Not-So Super Brain Teaser</TITLE>
    <SCRIPT LANGUAGE="JavaScript">
      var curElement;
      function doMouseMove() {
        var newleft=0, newTop = 0
        if ((event.button==1) && (curElement!=null)) {
          // position alien
          newleft=event.clientX-document.all.OuterDiv.offsetLeft-(curElement.offsetWidth/2)
          if (newleft<0) newleft=0
          curElement.style.pixelLeft= newleft
          newtop=event.clientY -document.all.OuterDiv.offsetTop-(curElement.offsetHeight/2)
          if (newtop<0) newtop=0
          curElement.style.pixelTop= newtop
          event.returnValue = false
          event.cancelBubble = true
        }
      }

      function doDragStart() {
        // Don't do default drag operation.
        if ("IMG"==event.srcElement.tagName)
          event.returnValue=false;
      }

      function doMouseDown() {
        if ((event.button==1) && (event.srcElement.tagName=="IMG"))
          curElement = event.srcElement
      }

      document.ondragstart = doDragStart;
      document.onmousedown = doMouseDown;
      document.onmousemove = doMouseMove;
      document.onmouseup = new Function("curElement=null")
    </SCRIPT>
    <SCRIPT FOR="playboard" EVENT="onmousedown" LANGUAGE="JavaScript">
      // Do not move the alienhead or allow it to be dragged
      event.cancelBubble=true
    </SCRIPT>
</HEAD>

<BODY TOPMARGIN=0 LEFTMARGIN=40 BGCOLOR="#FFFFFF" LINK="#000066" VLINK="#666666" TEXT="#000000">

  <DIV id=OuterDiv style="position:relative;width:100%;height:400px">
  <img ID="stage" STYLE="position:absolute;TOP:83pt;LEFT:142pt;width: 300px; height=150px; Z-INDEX:2;"  src="/images/stage.gif">
  <img ID="square" STYLE="position:absolute;TOP:8pt;LEFT:0pt;WIDTH:50pt;HEIGHT:50pt;Z-INDEX:22;" src="/images/square.gif">
  <img ID="circle" STYLE="position:absolute;TOP:8pt;LEFT:70pt;WIDTH:50pt;HEIGHT:50pt;Z-INDEX:21;" src="/images/circle.gif">
  <img ID="triangle" STYLE="position:absolute;TOP:8pt;LEFT:140pt;WIDTH:50pt;HEIGHT:50pt;Z-INDEX:21;" src="/images/triangle.gif">
  </div>

 </BODY></HTML>


Again, thank you very much for any help!
Tony
thaistixxxAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

fritz_the_blankCommented:
This is not my area of specialty, but can't you extract the values like:

intLeft = document.getElementByID("yourDot").left;
intTop = document.getElementByID("yourDot").top;
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
fritz_the_blankCommented:
Sorry there were some errors there. Take a look at this:

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
      <title>Untitled</title>
<script>
<!--
function getLocation(objElement){

intLeft =document.getElementById(objElement).offsetLeft;
intTop = document.getElementById(objElement).offsetTop;
alert(intLeft + " : " + intTop)
}
//-->
</script>
</head>

<body onload="getLocation('test')">

<div id="test">
This is my test div
</div>

</body>
</html>

</HEAD>
<BODY>

<P>&nbsp;</P>

</BODY>
</HTML>


Fritz the Blank
0
fritz_the_blankCommented:
So whatever code you use to move your dot, you could append code like that above and set the value of your fields like so:

function fillTextBoxes(objYourObject){
   document.getElementById('txtLeftCoordinate').value = document.getElementById(objYourObject).offsetLeft;
   document.getElementById('txtTopCoordinate').value  = document.getElementById(objYourObject).offsetTop;

}

where the id of your text fields are 'txtLeftCoordinate' and 'txtTopCoordinate'

Fritz the Blank
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

fritz_the_blankCommented:
Glad to have helped. Any reason for the B?

Fritz the Blank
0
thaistixxxAuthor Commented:
Hey fritz_the_blank,

Thanks a lot for your help! Although your answer did not have the exact code I needed to use, it gave me valuable insight that lead me to what I needed. It was actually easier than I thought. Something is actually working for a change YA! Hehe, thanks again.

Tony
0
fritz_the_blankCommented:
Fair enough, I just would have appreciated the opportunity to help you until you were completely satisfied.

Good luck with your project,

Fritz the Blank
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.