?
Solved

Extracting XY coordinates to Text Field

Posted on 2003-12-05
6
Medium Priority
?
1,388 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
6 Comments
 
LVL 46

Accepted Solution

by:
fritz_the_blank earned 1500 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
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…
Suggested Courses

762 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