Solved

Extracting XY coordinates to Text Field

Posted on 2003-12-05
6
1,382 Views
Last Modified: 2007-12-19
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
0
Comment
Question by:thaistixxx
  • 5
6 Comments
 
LVL 46

Accepted Solution

by:
fritz_the_blank earned 500 total points
ID: 9883262
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
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 9883298
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
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 9883324
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
PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 9897308
Glad to have helped. Any reason for the B?

Fritz the Blank
0
 

Author Comment

by:thaistixxx
ID: 9897402
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
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 9897420
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

Featured Post

NAS Cloud Backup Strategies

This article explains backup scenarios when using network storage. We review the so-called “3-2-1 strategy” and summarize the methods you can use to send NAS data to the cloud

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

832 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question