This may be a math question more than a programming question, but we'll see.
I'm trying to build a simple javascript click tracker that one could add to any website, which will plot its data to a heat map.
The Problem
If I capture the x/y coordinates of a click event on a web page being displayed in a window measuring 1024x768, and try to map that onto a heat map being displayed at 1280x1024 (or any other size), there's a good possibility that the click won't display in the correct location.
If, for example, the content of the web page is centred within a 960px wide div, because the x,y coordinates captured measure from an origin at the top-left corner of the window, the coordinates don't match in physical space.
I could use the difference between the two screen sizes to create an origin in the centre of all screens and measure from there, but then I wind up with the same problem for any content that isn't positioned relative to the centre of the page.
Is there a way to develop a set of absolute coordinates of an element on the page, without knowing the size of the browser window or what's on the page?
I know I could bind the click to the DOM element. That's fine, and I'll probably go that route, but now that I've found this problem, I'm curious as to the possible solution.