[js] relative mausposition zu div Element herausfinden (erledigt)

[Goltergaul]

hi hab mal wieder ein etwas komplizierteres Problem^^
Und zwar habe ich hier folgendes Div:

<div id="map" style="position: relative; width: <? echo ($config_kartenbreite*11); ?>px; height: <? echo ($config_kartenhoehe*11+15); ?>px; background: url(cache/radarmap_<? echo $user_id; ?>.png);">
   </div>

und ich möchte per Javascript den x und y Abstand des Cursors aus der oberen linken Ecke des Divs herausfinden? Hat da jemand eine Idee?

 

[Johnson]

Für nicht IE-Benutzer gibt es das:

https://de.selfhtml.org/javascript/objekte/event.htm#layer_x_y

beim IE könnte man das über Umwege berechnen (wenn es nicht auch eine direkte Möglichkeit gibt):

https://de.selfhtml.org/javascript/objekte/event.htm#client_x_y

 

[Goltergaul]

ok danke, das Problem ist gelößt =)

 

[SpecialsGuy]

Es gibt eine browserweite Lösung ... falls deine doch nicht browserweit funktioniert oder die Koordinaten nicht stimmen, wenn z.B. gescrollt wird, dann meld dich, schicke dir gerne den Code.

 

[SpecialsGuy]

Hey, ich finde das gemein, daß man mir gleich ein rotes Renomee (und dann auch noch anonym) verpasst, nur weil ich den Code nicht reingeschrieben habe ... der Grund dafür war lediglich, daß es hieß, das Problem sei gelöst und es war spät und ich müde! Man hätte mir auch ein PN schicken können!

Also ok, hier ist dieser Javascript-Code. (ich hoffe ich kriege jetzt mal zum Ausgleich auch eine positive Bewertung). Dieser Code sollte in jedem Browser funktionieren und er berücksichtigt sogar, wenn eine Seite gescrollt wurde, so daß man weiterhin die korrekten Koordinaten innerhalb eines Elements (z.B. einer Grafik) der Seite erhält. Das Scrolling berücksichtigen leider über 90% aller im Internet kursierenden Codes nicht, als ich damals nach sowas gesucht hatte.

Das zu überwachende Objekt lautet im Beispiel "meinobjekt". Auf der Seite muss daher ein HTML-Tag folgendes enthalten: id="meinobjekt" - der Code kann natürlich für mehrere Elemente benutzt werden, einfach den ersten Codeabschnitt öfters kopieren und "meinobjekt" jeweils in einem eindeutigen Namen für jedes Element umbenennen.

Beispiele:

<div id="meinobjekt">...</div>
<img src="grafik.gif" id="meinobjekt2">

Viel Spaß damit, wer ihn braucht.

  meinobjekt.onmousemove = function (evt) {
    var evt = evt || window.event;
    posX = getMouseX(evt);
    posY = getMouseY(evt);
    // sonstwas mit posX und posY damit machen ... 
  }


function getMouseX(evt) {
  if (evt && evt.offsetY) {
    return evt.offsetX;
  } else {
    var obj = getEventObject( evt );
    if ( !obj.pageLeft )
      setPageTopLeft( obj );
    return (evt.clientX - obj.pageLeft - document.body.scrollLeft);
  }
}

function getMouseY(evt) {
  if (evt && evt.offsetY) {
    return evt.offsetY;
  } else {
    var obj = getEventObject( evt );
    if ( !obj.pageTop )
      setPageTopLeft( obj );
    return (evt.clientY - obj.pageTop - document.body.scrollTop);
  }
}

function setPageTopLeft( o )
{
    var top = 0,
    left = 0,
    obj = (typeof o == "string") ? document.getElementById(o) : o,
    body = document.getElementsByTagName('body')[0];
    
    while ( o.offsetParent && o != body) 
     {
         left += o.offsetLeft ;
         top += o.offsetTop ;
         o = o.offsetParent ;
    };

    obj.pageTop = top;
    obj.pageLeft = left;
}

function getEventObject( e )
{
  return e.target || e.srcElement;
};