Antwort an „Linuchs“ verfassen

Hallo Martin,

offsetLeft und offsetTop sind relativ zum Elternelement.

Das weiß ich und lasse die Elternelemente durchlaufen:

  let obj_1 = document.getElementById(id1);
  let x1    = 0;
  let y1    = 0;
  while ( obj_1.style.position != "relative" && obj_1.tagName != "body" ) {
    x1  +=  obj_1.offsetLeft;     // x-Pixel addieren
    y1  +=  obj_1.offsetTop;      // y-Pixel addieren
    console.log( "x1=[" +x1 +"] y1=[" +y1 +"]" );
    obj_1 = obj_1.parentElement;
  }

Die offsets der Vorfahrenelemente

Verstehe ich nicht, HTML-mäßig davor auf gleicher Ebene ist die Grafik. Die wäre wohl ein sibling, aber das Stichwort fehlt in deinem Link.

<div id=canvas_1 class=mb05 style="position:relative; height:10em;">
  <div class=li style="position:relative; width:10em; height:10em;">
    <img src="img/animiertes_segelboot.gif" style="width:100%;height:100%" alt="Segelschiff" />
    <div class=anker id=fock        style="left:20%; top:65%"></div>
    <div class=anker id=gross       style="left:42%; top:50%"></div>
    <div class=anker id=besan       style="left:65%; top:50%"></div>
  </div>
  <p><b>Segel eines Dreimasters:</b></p>
  <p id=fock_x>Fock</p>
  <p id=gross_x>Grosssegel</p>
  <p id=besan_x>Besansegel</p>
  <div class=clear></div>
  <script>
  // die transparente SVG-Grafik, die id=canvas_1 mit position:absolute vollflächig bedeckt
  </script>
</div>
freiwillig, öffentlich sichtbar
freiwillig, öffentlich sichtbar
freiwillig, öffentlich sichtbar

Ihre Identität in einem Cookie zu speichern erlaubt es Ihnen, Ihre Beiträge zu editieren. Außerdem müssen Sie dann bei neuen Beiträgen nicht mehr die Felder Name, E-Mail und Homepage ausfüllen.

abbrechen