Solved

Extracting XY coordinates to Text Field

Posted on 2003-12-05
6
1,380 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
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
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…

760 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now