Ich hab hier eine kleine OO Variante um die Mauskoordinaten zu kriegen
brauch man immer mal...das ganze ist Crossbrowser..sollte also immer funktionieren
function mouseCoordinates() {
var posx = 0;
var posy = 0;
this.init = function() {
document.onmousemove = getCoordinates;
}
function getCoordinates(e) {
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
}
saveCords();
}
function saveCords() {
document.coordinates.posx.value = posx;
document.coordinates.posy.value = posy;
}
}
das ganze verwendet man:
coords = new mouseCoordinates();
coords.init();
die koordinaten werden in einer form gespeichert...kann man auch umschreiben, das ist in der methode saveCords()
Die Form müsste so ausschauen:
<form name="coordinates">
<input type="hidden" name="posx" value="" />
<input type="hidden" name="posy" value="" />
</form>
das ganze sieht dann in einem html dokument eingebaut so aus:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="de">
<head>
<title>Mauskoordinaten</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script type="text/javascript">
<!--
function mouseCoordinates() {
var posx = 0;
var posy = 0;
this.init = function() {
document.onmousemove = getCoordinates;
}
function getCoordinates(e) {
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
}
saveCords();
}
function saveCords() {
document.coordinates.posx.value = posx;
document.coordinates.posy.value = posy;
}
}
coords = new mouseCoordinates();
coords.init();
//-->
</script>
</head>
<body>
<form name="coordinates">
<input type="hidden" name="posx" value="" />
<input type="hidden" name="posy" value="" />
</form>
</body>
</html>
Demo:
http://nonsense.moonsword.info/mauskoordinaten.html
da wurden die hidden felder in text felder umgewandelt, damit man sehen kann, wie sie verändert werden