curser bestimmung!!

GreenRover

Dieses Script bestimmt die curserposition im IE aber im Mozilla funst es nicht

wiso???

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">


<script language="javascript">
<!--
function test()
{
 var isNav = (navigator.appName.indexOf("Netscape") !=-1);
 
 x = (isNav) ? e.pageX : event.clientX + document.body.scrollLeft;
 y = (isNav) ? e.pageY : event.clientY + document.body.scrollTop;
 alert("X:" + x + " - Y:" + y);
}
-->
</script>
</head>


<body>




</p>
<a onClick="test();">TEST</a>
</body>
</html>

Alles anzeigen

Torty

Das liegt an der unterschiedlichen Event-Behandlung. Für den FF und den NN4 funktioniert dies ebenso unterschiedlich. Ich hatte dieses Problem vor ~2 Monaten und hab mir dann zwei Funktionen gebastelt, die das je nach verwendetem Browser passend einrichten und abfragen.
Dieses Codebeispiel stell ich hiermit allen zur Verfügung.

Code

...
  function getMouseXY(e) {
    if (window.event) { // IE
      mouseX = event.clientX;
      mouseY = event.clientY;
    }
    else {
      if (document.layer) { // NN4
        mouseX = e.pageX;
        mouseY = e.pageY;
      }
      else { // Moz
        mouseX = e.clientX;
        mouseY = e.clientY; 
      }
    }
    return new Array(mouseX, mouseY);
  }
  //***********************************

  function initEventManagement() {
    // Event-Handler installieren
    if(window.event) { // IE
      document.onmousemove = showMouseXY;
    }
    else {
      if(document.layer) { // NN4
        document.captureEvents(Event.MOUSEMOVE);
        document.onmousemove = showMouseXY;
      }
      else { // Moz
        document.addEventListener("mousemove", showMouseXY, false);
      }
    }
    //*********************************

    window.onload = initEventManagement;
...

Alles anzeigen

Als Rückgabewert erhält man ein Array mit 2 Elementen, die jeweils den X- & Y-Wert repräsentieren.

GreenRover

Das funktionier so leider nicht.

kannst du mir sagen warum ???

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>


<body>


<script language="javascript">
<!--
  function getMouseXY(e) {
    if (window.event) { // IE
      mouseX = event.clientX;
      mouseY = event.clientY;
    }
    else {
      if (document.layer) { // NN4
        mouseX = e.pageX;
        mouseY = e.pageY;
      }
      else { // Moz
        mouseX = e.clientX;
        mouseY = e.clientY;
      }
    }    


    alert(mouseX+"|"+mouseY);
    // return new Array(mouseX, mouseY);
  }
  //***********************************
 
  function initEventManagement() {
    // Event-Handler installieren
    if(window.event) { // IE
      document.onmousemove = showMouseXY;
    }
    else {
      if(document.layer) { // NN4
        document.captureEvents(Event.MOUSEMOVE);
        document.onmousemove = showMouseXY;
      }
      else { // Moz
        document.addEventListener("mousemove", showMouseXY, false);
      }
    }
    //*********************************


    window.onload = initEventManagement;
-->
</script>






</p>
<a onClick="getMouseXY()">TEST</a>
</body>
</html>

Alles anzeigen

Torty

Also ich habe das JS in ner Datei (sagen wir mal mousexy.js) gepackt und binde die dann so ein

Code

<script type="text/javascript" src="mousexy.js"></script>

Das steht bei mir auch im BODY.

BTW: Verwende bei der Initialisierung von JS bitte das gültige Attribut type="text/javascript". Das language ist veraltet, aber kann mit stehen bleiben.

GreenRover

ist das gleiche in grün.

da ich immer beim onlick die fehlermeldung bekome objekt erwartet

Code

onClick="getMouseXY();"

oder muss ich noch was übergeben ??

das e (event) ist doch eigentlich nur die posi der mous oder liege ich da falsch???

GreenRover

jetzt ghet es im IE

du hast eine klammer vergessen

Code

function initEventManagement() {
    // Event-Handler installieren
    if(window.event) { // IE
      document.onmousemove = showMouseXY;
    }
    else {
      if(document.layer) { // NN4
        document.captureEvents(Event.MOUSEMOVE);
        document.onmousemove = showMouseXY;
      }
      else { // Moz
        document.addEventListener("mousemove", showMouseXY, false);
      }
    }
    //*********************************
    }
    window.onload = initEventManagement;

Alles anzeigen

die letzt geschweifte

oder wie sieht es bei dir aus ??

Torty

Ok die Funktion initEventManagement hatte eine } zu wenig. Die habe ich geändert.

Hier also die fehlerbereinigte Version:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>


<body>


<script language="javascript" type="text/javascript">
<!--
  function replaceElementHTML(tagid, output) {
	  var ref = document.getElementById(tagid);
	  ref.innerHTML = output;
  }
  //***********************************

  function getMouseXY(e) {
    if (window.event) { // IE
      mouseX = event.clientX;
      mouseY = event.clientY;
    }
    else {
      if (document.layer) { // NN4
        mouseX = e.pageX;
        mouseY = e.pageY;
      }
      else { // Moz
        mouseX = e.clientX;
        mouseY = e.clientY;
      }
    }   


    return new Array(mouseX, mouseY);
  }
  //***********************************

  function showMouseXY(e) {
    // zeigt die Mauskoordinaten an
    var mXY = getMouseXY(e);
    replaceElementHTML("info", mXY[0]+" : "+mXY[1]);    // gibt die Mouse-Koord's aus
  }
  //*********************************************

 
  function initEventManagement() {
    // Event-Handler installieren
    if(window.event) { // IE
      document.onmousemove = showMouseXY;
    }
    else {
      if(document.layer) { // NN4
        document.captureEvents(Event.MOUSEMOVE);
        document.onmousemove = showMouseXY;
      }
      else { // Moz
        document.addEventListener("mousemove", showMouseXY, false);
      }
    }
  }
  //*********************************


    window.onload = initEventManagement;
-->
</script>


<div id="info" style="width=250px; height:20px; position:absolute; left:20px; top:30px;"> </div>
</body>
</html>

Alles anzeigen

GreenRover

also wie gesagt im IE funst es.

aber im mozilla net.

Code

function getMouseXY(e)

was bedeutet das e ???

Torty

Der IE kann immer auf das allgemeine Objekt event zugreifen. Der FF übergibt an die showMouseXY das Event-Objekt. Deshalb muss es dort angegeben werden, da der Mozilla sonst keine Informationen über das Event ermitteln kann.

Du meinst also den Mozilla-Browser, der sich vom FF unterscheidet?! Dachte die benutzen die gleiche Gecko-Engine...
Baja ich mach mich mal schlau...

Torty

Also ich hab mir grad die Mozilla-Suite installiert und das Script getestet. Bei mir läuft das (erwartungsgemäß) ohne Probleme.
Welche Version nutzt du und welche Fehlermeldung kannst du ermitteln?

GreenRover

Ich habe den 1.7.5 Suite und 1.0.3 FF.

Fehler: e has no properties

im atachment mein TEXT.

Torty

Bitte kopiere dir mein letztes Script und teste es. Die Version die du als Attachement angehangen hast, war eine vorherige Fassung, die kleine Fehler enthielt.

Und

Code

<a onClick="getMouseXY();">TEST</a>

ist auch nicht die richtige Verwendung für meine JS-Funktionen. Denn getMouseXY() liefert ja ein Array zurück.

GreenRover

nein ich habe die array gegen ein allert ausgetauscht gehabt.

GreenRover

OK das funktioniert.

Nun mus ich das nur noch zu einem meneu umbauen.

Ich habe es vor das wenn man auf einen bestimmten bereich ist ( tabelle onMouseOver ) das dann ein div sichtbar wird.

Torty

Ok, also einen Tooltip möchtest du erzeugen?

Torty

Ok, also einen Tooltip möchtest du erzeugen?

viele Links zum Thema "Tooltips mit Javascript"

GreenRover

jo so in der art.

GreenRover

Mein erster Ansatz:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>


<body>


<script language="javascript" type="text/javascript">
<!--
  function replaceElementHTML(tagid, output) {
     var ref = document.getElementById(tagid);
     ref.innerHTML = output;
  }
  //***********************************
 
  function getMouseXY(e) {
    if (window.event) { // IE
      mouseX = event.clientX;
      mouseY = event.clientY;
    }
    else {
      if (document.layer) { // NN4
        mouseX = e.pageX;
        mouseY = e.pageY;
      }
      else { // Moz
        mouseX = e.clientX;
        mouseY = e.clientY;
      }
    }   


    return new Array(mouseX, mouseY);
  }
  //***********************************
 
  function showMouseXY(e) {
    // zeigt die Mauskoordinaten an
    var mXY = getMouseXY(e);

    document.getElementById("info").style.left=mXY[0]+15;
    document.getElementById("info").style.top=mXY[1]-5;


    replaceElementHTML("info", mXY[0]+" : "+mXY[1]);    // gibt die Mouse-Koord's aus
  }
  //*********************************************

 
  function initEventManagement() {
    // Event-Handler installieren
    if(window.event) { // IE
      document.onmousemove = showMouseXY;
    }
    else {
      if(document.layer) { // NN4
        document.captureEvents(Event.MOUSEMOVE);
        document.onmousemove = showMouseXY;
      }
      else { // Moz
        document.addEventListener("mousemove", showMouseXY, false);
      }
    }
  }
  //*********************************


    window.onload = initEventManagement;
-->
</script>


<div id="info" style="position:absolute; background-color:FFFFDD;color:black;border-color:black;border-width:20; visibility:show; left:25px; top:100px; z-index:+1">
</div>


</body>
</html>

Alles anzeigen

fusnt leider auch bloß wieder im IE

Torty

Bitte ändere den Code in

Code

...
  document.getElementById("info").style.left=mXY[0]+15+"px";
  document.getElementById("info").style.top=mXY[1]-5+"px"; 
...

Dann sollte es klappen...

GreenRover

danke die px vergessen

Tags