Math with coordinates

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Cainnech
    New Member
    • Nov 2007
    • 132
    #1

    Math with coordinates

    Hi all,

    I've got a bit of a challenge. I've got a script which displays the mouse coodinates if you click on an image. Now I would like to convert these coordinates to pixelnumber. Let me see if I can make it easier. Suppose we have an image which is 100px high and 100px wide.
    The coordinates of the upper left corner would be x=0 and y=0
    The coordinates of the upper right corner would be x=99 and y=0
    The coordinates of the lower left corner would be x=0 and y=99
    The coordinates of the upper left corner would be x=99 and y=99

    Now I would like to display these coordinates on an other way, by the pixel they represent. So that would mean:
    The pixelnumber of the upper left corner would be 1
    The pixelnumber of the upper right corner would be 100
    The pixelnumber of the lower left corner would be 9901
    The pixelnumber of the upper left corner would be 10000

    So by using the coordinates I'm sure that these pixelnumbers could be calculated. However, I'm not capable of writing this myself. Can anyone help me with this?

    Here is code that I have so far:

    [HTML]<html>
    <head>
    <script language="JavaS cript">

    function point_it(event) {
    var pointer_div = document.getEle mentById("point er_div");
    //IE
    if (window.ActiveX Object) {
    pos_x = window.event.of fsetX;
    pos_y = window.event.of fsetY;
    }
    //Firefox >>> still to be checked!!
    else {
    var top = 0, left = 0;
    var elm = pointer_div;
    while (elm) {
    left = elm.offsetLeft;
    top = elm.offsetTop;
    elm = elm.offsetParen t;
    }

    pos_x = event.pageX - left;
    pos_y = event.pageY - top;
    }

    document.pointf orm.form_x.valu e = pos_x;
    document.pointf orm.form_y.valu e = pos_y;
    document.pointf orm.form_pixel. value = pixel;
    }


    </script>
    </head>
    <body>
    <form name="pointform " method="post">
    <div id="pointer_div " onclick="point_ it(event)" style = "background-image:url('http ://www.nasa.gov/externalflash/NASA45/27/27image.jpg');w idth:516px;heig ht:387px; CURSOR: crosshair"></div>
    Coordinates<br>
    x = <input type="text" name="form_x" size="4">
    y = <input type="text" name="form_y" size="4">
    <br>
    pixel = <input type="text" name="form_pixe l" size="8">
    </form>
    </body>
    </html>[/HTML]
    Last edited by acoder; Nov 26 '07, 09:49 AM. Reason: Added code tags
    Tags: None
    • Cainnech
      New Member
      • Nov 2007
      • 132
      #2
      Hi guys,

      It's me again. I thought I would never figure out how to do it. Until I realised that I was looking at it from the wrong point of view.

      I just needed to find the formula to calculate the pixels. So I started out in Excel trying to find the right formula. Once I found that one, I just had to convert it into javascript. And what do you know it actually works!

      So I doubt if anyone would really need such a script but anyway, here it is:

      Code:
      <html>
<head>
<script language="JavaScript">

function point_it(event){
var pointer_div = document.getElementById("pointer_div");
var pixel;
var imagewidth="516";
var calc;
var top = 0, left = 0;
var elm = pointer_div;

//IE
if (window.ActiveXObject) {
pos_x = window.event.offsetX;
pos_y = window.event.offsetY;
}

//Firefox >>> still to be checked!!
else {
while (elm) {
left = elm.offsetLeft;
top = elm.offsetTop;
elm = elm.offsetParent;
}
pos_x = event.pageX - left;
pos_y = event.pageY - top;
}

if (pos_y <= "0"){
calc = (pos_y)
}
else{
calc = (parseInt(pos_y)*parseInt(imagewidth) - parseInt(pos_y))
}
   
pixel = (parseInt(pos_y) + parseInt(pos_x+1)) + calc;



// Debugging
document.pointform.form_x.value = pos_x + 1;
document.pointform.form_y.value = pos_y + 1;
document.pointform.form_pixel.value = pixel;
}

</script>
</head>
<body>
<form name="pointform" method="post">
<div id="pointer_div" onclick="point_it(event)" style = "background-image:url('http://www.nasa.gov/externalflash/NASA45/27/27image.jpg');width:516px;height:387px; CURSOR: crosshair"></div>

<!-- Debugging -->
Coordinates<br>
x = <input type="text" name="form_x" size="4">
y = <input type="text" name="form_y" size="4">
<br>
pixel = <input type="text" name="form_pixel" size="8">
</form> 
</body>
</html>
      Good luck to all!

        Comment

        Previous template Next
        Working...