By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,339 Members | 1,680 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,339 IT Pros & Developers. It's quick & easy.

Math with coordinates

100+
P: 132
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="JavaScript">

function point_it(event){
var pointer_div = document.getElementById("pointer_div");
//IE
if (window.ActiveXObject) {
pos_x = window.event.offsetX;
pos_y = window.event.offsetY;
}
//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.offsetParent;
}

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

document.pointform.form_x.value = pos_x;
document.pointform.form_y.value = pos_y;
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>
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>[/HTML]
Nov 25 '07 #1
Share this Question
Share on Google+
1 Reply


100+
P: 132
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:

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <script language="JavaScript">
  4.  
  5. function point_it(event){
  6. var pointer_div = document.getElementById("pointer_div");
  7. var pixel;
  8. var imagewidth="516";
  9. var calc;
  10. var top = 0, left = 0;
  11. var elm = pointer_div;
  12.  
  13. //IE
  14. if (window.ActiveXObject) {
  15. pos_x = window.event.offsetX;
  16. pos_y = window.event.offsetY;
  17. }
  18.  
  19. //Firefox >>> still to be checked!!
  20. else {
  21. while (elm) {
  22. left = elm.offsetLeft;
  23. top = elm.offsetTop;
  24. elm = elm.offsetParent;
  25. }
  26. pos_x = event.pageX - left;
  27. pos_y = event.pageY - top;
  28. }
  29.  
  30. if (pos_y <= "0"){
  31. calc = (pos_y)
  32. }
  33. else{
  34. calc = (parseInt(pos_y)*parseInt(imagewidth) - parseInt(pos_y))
  35. }
  36.  
  37. pixel = (parseInt(pos_y) + parseInt(pos_x+1)) + calc;
  38.  
  39.  
  40.  
  41. // Debugging
  42. document.pointform.form_x.value = pos_x + 1;
  43. document.pointform.form_y.value = pos_y + 1;
  44. document.pointform.form_pixel.value = pixel;
  45. }
  46.  
  47. </script>
  48. </head>
  49. <body>
  50. <form name="pointform" method="post">
  51. <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>
  52.  
  53. <!-- Debugging -->
  54. Coordinates<br>
  55. x = <input type="text" name="form_x" size="4">
  56. y = <input type="text" name="form_y" size="4">
  57. <br>
  58. pixel = <input type="text" name="form_pixel" size="8">
  59. </form> 
  60. </body>
  61. </html> 
  62.  
Good luck to all!
Nov 26 '07 #2

Post your reply

Sign in to post your reply or Sign up for a free account.