Willkommen in der Webstatt Zum Webstatt Blog und Stories
nuit nuit am 10.10.06 22:02

Ich hab hier eine kleine OO Variante um die Mauskoordinaten zu kriegen ;) brauch man immer mal...das ganze ist Crossbrowser..sollte also immer funktionieren :D

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

netcup.de Warum gibt es hier Werbung?
Creative Commons Lizenzvertrag
Alle Inhalte des Webstatt-Archivs stehen unter einer Creative Commons Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Unported Lizenz.

Impressum & Kontakt