Adromir: Mouseposition innerhalb eines Elementes

SELF-Forum

Mouseposition innerhalb eines Elementes

Adromir
– Informationen zu den Bewertungsregeln

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

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Mouseposition innerhalb eines Elementes

    Andreas Dölling
    – Informationen zu den Bewertungsregeln

    Hallo,

    zunächst ein Linktipp: http://www.quirksmode.org/js/. Dort wirst Du alles finden, was Du brauchst.

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

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

    liefern irgendeinen Wert zurück..

    Mit der style-Eigenschaft kannst Du nur auf inline-Styles zugreifen. Du hast aber die Position des "over"-DIV im HEAD-Bereich deklariert.
    Da brauchst Du zum Auslesen der Werte einen anderen Ansatz:
    IE -> [node].currentStyle.[prop]
    DOM -> mydivstyle = window.getComputedStyle([node], ""); mydivstyle.getPropertyValue([prop]);
    Siehe auch http://www.javascriptkit.com/dhtmltutors/dhtmlcascade.shtml.

    Frohes Schaffen!

    Ciao,
    Andreas

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Mouseposition innerhalb eines Elementes

    Struppi Homepage des Autors
    +1 Informationen zu den Bewertungsregeln

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

    Events werden auf dieser Seite sehr ausführlich beschrieben
    http://www.quirksmode.org/js/

    Sehr ausfürhlich ist auch http://www.howtocreate.co.uk/tutorials/index.php?tut=0&part=14

    Hier ein Beispiel wie ich das umsetze http://javascript.jstruebig.de/lib/mouse.html

    und hier kannst du nachvollziehen, welche Event Eigenschaften in welchem Browser was anzeigen http://javascript.jstruebig.de/exp/mouse-test.html

    Wegen der Position:
    du kannst style Attribute nur lesen, wenn sie gesetzt wurden. Die wirklichen Werte sind in neueren Browsern in offsetLeft/Right

    Die Bibliothek enthält die nötigen Funktionen:
    http://javascript.jstruebig.de/lib/layer/layer_base.html

    Struppi.

    --
    Javascript ist toll
    Beitrag melden
    +1
    Informationen zu den Bewertungsregeln

    1. Mouseposition innerhalb eines Elementes

      Adromir
      – Informationen zu den Bewertungsregeln

      @struppi: Danke schon mal, ic werde mich da mal durchlesen..

      @Andreas: Bist du da sicher, daß das nur auf Inline-Objekte geht?
      Ich hab mit diesem Code schon öfters die Eigenschaften von irgendwelchen Containern verändert, die ich im <head> deklariert habe *shrug*

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Mouseposition innerhalb eines Elementes

        wahsaga Homepage des Autors
        – Informationen zu den Bewertungsregeln

        hi,

        @Andreas: Bist du da sicher, daß das nur auf Inline-Objekte geht?

        er sprach von inline style, nicht von "Inline-Objekten".

        Ich hab mit diesem Code schon öfters die Eigenschaften von irgendwelchen Containern verändert, die ich im <head> deklariert habe *shrug*

        eben, verändert. das ist etwas anderes, als auslesen.
        und auslesen über das style-objekt geht eben nur dann, wenn der wert als inline style angegeben, oder zuvor per JS gesetzt wurde.

        gruß,
        wahsaga

        --
        /voodoo.css:
        #GeorgeWBush { position:absolute; bottom:-6ft; }
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln