Adromir: Mouseposition innerhalb eines Elementes

Beitrag lesen

Ich bin gerade dabei, mich an Javascript zu versuchen. Der Sinn des Scriptes ist es, die Position des Mousezeigers Inherhalb eines Dokumentes einer Webseite anzuzeigen.

Ich hab es jetzt so versucht:

[CODE]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
  <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
  <title>JS- Test</title>
  <style type="text/css" media="screen"><!--
html, body { color: black; background-color: white; margin: 0; padding: 0 }
#over  { visibility: visible; position: absolute; top: 18px; left: 18px; width: 200px; height: 100px; border: solid 1px black; cursor: crosshair }
#ret  { visibility: visible; position: absolute; top: 171px; left: 18px; border: solid 1px black; padding: 2px }
--></style>
  <script type="text/javascript"><!--
function return_pos(div2, posx, posy) {

if(navigator.appName == "Netscape") {
if (!e) var e = window.event;
var x = e.pageX;
var y = e.pageyY;
alert("Es funktioniert noch nicht im Mozilla");

}

else {
var x = window.event.clientX - posx;
var y = window.event.clientY - posy;
}

if( x < 0 ) x = 0;
if( x > 200) x = 200;

if( y < 0 ) y = 0;
if( y > 100) y = 100;
document.getElementById(div2).firstChild.nodeValue  = "X: "+ x +" Y: "+ y +"";

}
//-->
</script>
</head>

<body bgcolor="#ffffff">
  <div id="over" onmousemove="javascript:return_pos('ret','18','18')">&nbsp;</div>

<div id="ret">&nbsp;</div>
</body>
</html>[/CODE]

Zur Erklärung:
Ich habe den Container "over" absolut in der Webseite positioniert.
Fährt man über diesen, dann wird in "ret" die Mouseposition angezeigt.
Die Position errechnet sich aus: Positionierung des Cursors innerhalb der Webseite - der Position des Containers.
Sind X oder Y Koordinate größer als Breite/Weite des Containers, so wird der Wert auf die vorgegebene Werte zurückgesetzt (oder wenn kleiner auf 0).

Die Browserweiche wird gebraucht, weil Mozilla-Derivate kein clientX kennen und ich da mit pageX arbeiten müsste.. Aber nun zu meinen Problemen:

1. Firefox gibt nur Scriptfehler aus.
Wenn ich window.event.pageX einsetze, dann kommt nur die Fehlermeldung
"window.event is not defined" .

2. Im IE funktioniert es auf einmal nur noch, wenn ich den Rahmen des Containers mit der Mouse nachfahre.. Obwohl es vorher mit dem gleichen Code geklappt hat..

Dann will ich das Script noch insoweit verbessern, daß es die Positionierung und die Breite des Containers automatisch aus den Styleangaben ausliest.

aber
weder
var width = document.getElementById("over).style.width;

noch
var width = document.getElementById("over).style.getAttribute("width","false");

liefern irgendeinen Wert zurück..

Ich hab jetzt schon 3 Stunden daran rumgeflickt, mir mehrere Anleitungen aus dem Internet angeschaut, aber ich kriege jedesmal die gleichen Fehlermeldungen :(

Ich hoffe auf eure Hilfe!

gruß

Adromir