Martin wrote:
<snip>
Here's the code I ended up using to generate the x,y coordinates:
x=event.clientX + window.document.body.scrollLeft -
document.images[0].offsetLeft - 2;
y=event.clientY + window.document.body.scrollTop -
document.images[0].offsetTop- 2;
I'm writing strictly for the IE browser. I know you'll have to use
different code to capture the "event.clientX" and "event.clientY"
values in NS.
IE browser mouse event objects have - offsetX/Y - properties that may be
a more direct way of achieving your goal (they are not well supported on
other browsers).
However, An element's total offset into a page is more complex than
just - document.images[0].offsetTop - because that represents the offset
to the element's - offsetParent -. When the element is not a direct
child of the BODY its - offsetTop/Left - may not be its page offset (CSS
absolute positioning also influences offset values).
Position information is available (where supported, as not all browsers
provide this info) by summing the - offsetTop/Left - values for each
element with all of its offset parent elements - offsetTop/Left - values
and then its offset parent's, until one of those elements has its -
offsetParent - property set to - null -. At least that is in the
simplest case; element's with borders and CSS overflow set so that they
scroll, add additional complexity to the calculations).
The constant value that you are using - 2 - is compensating for the -
clientTop/Left - property of the document.body element (on IE <= 5.5 and
IE 6 in "BackCompat" mode) and represents a default 2px inset border on
the root element. In principle that number is only the default and it is
possible for users to modify the border width on the root element (or
even a page designer through a CSS assignment). It would probably be
better to actually read the - document.body.clientTop/Left - property to
acquire that number as then it will always represent the user's real
configuration.
On IE 6 it is possible to put the browser into "standards"
('CSS1Compat') mode, and if that happens the - scrollTop/Left - values
and the - clientTop/Left - values that apply to the root element are not
available from - document.body - but should instead be read from -
document.documentElement -. If there is a chance that the script will be
used in more than one context, or that the HTML design may at some point
change to be formally valid, it would be a good idea to be deciding
which of - document.body - or - document.documentElement - should be
read by checking the string value available from - docuemnt.compatMode -
(which doesn't exist on IE <= 5.5). Archive searching for
"document.compatMode" will turn up many examples and approaches.
Richard.
