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