Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win


Extracting XY coordinates to Text Field

Posted on 2003-12-05
Medium Priority
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!!!


<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
          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)

      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 FOR="playboard" EVENT="onmousedown" LANGUAGE="JavaScript">
      // Do not move the alienhead or allow it to be dragged


  <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">


Again, thank you very much for any help!
Question by:thaistixxx
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
LVL 46

Accepted Solution

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;
LVL 46

Expert Comment

ID: 9883298
Sorry there were some errors there. Take a look at this:

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

function getLocation(objElement){

intLeft =document.getElementById(objElement).offsetLeft;
intTop = document.getElementById(objElement).offsetTop;
alert(intLeft + " : " + intTop)

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

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





Fritz the Blank
LVL 46

Expert Comment

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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

LVL 46

Expert Comment

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

Fritz the Blank

Author Comment

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.

LVL 46

Expert Comment

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

Featured Post

Ask an Anonymous Question!

Don't feel intimidated by what you don't know. Ask your question anonymously. It's easy! Learn more and upgrade.

Question has a verified solution.

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

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
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…

610 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