0

Hello,

I have done how to find out co ordinate(x and y axis) of a point on an image where a user clicks.
But I need the opposite thing now.
I need to mark a point on an image when a user gives suitable x axis and y axis co ordinate as input, how can i do this with java script?
Pls help

2
Contributors
2
Replies
3
Views
7 Years
Discussion Span
Last Post by subhankar02dey
0

Here

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta name="generator" content=
    "HTML Tidy for Windows (vers 25 March 2009), see www.w3.org">
    <title></title>
    <script type="text/javascript">
    function setXY() {
        var oZ = document.getElementById('z')

        function setX(x) {
            oZ.style.left = isNaN(x) ? 0 : x % 100
        }

        function setY(y) {
            oZ.style.top = isNaN(y) ? 0 : y % 100
        }

        setX(document.getElementById('x').value)
        setY(document.getElementById('y').value)

    }
    </script>
  </head>
  <body>
    <div onclick="setXY()" style=
    "position:absolute; top:0; left:0; height:120px; width:110px; background-color:yellow">
    </div>
    <div id='z' style="position:absolute; top:0; left:0">
      z
    </div><br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <form>
      x: <input id='x' value='0'> y: <input id='y' value='0'>
    </form>
  </body>
</html>

is a toy example.

In the general case you need to adjust the origin of the x/y values to match the current location of the background image and scale both ranges to match its dimensions.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.