Klaus: Wie Div über Bild zeigen, dass sich mit Bild mitbewegt?

SELF-Forum

Wie Div über Bild zeigen, dass sich mit Bild mitbewegt?

Klaus
– Informationen zu den Bewertungsregeln

Hallo,

ich würd gern eine Grafik anzeigen, auf der Text und/oder Grafik darstellen kann. (Ähnlich wie auf einer Landkarte die Fähnchen mit Beschreibung)
Die Grafik lässt sich per Drag&Drop verschieben, dabei sollen sich die Texte/Grafiken natürlich entsprechend mitbewegen.

Kann ich Texte als Child eines Bildes erstellen?
Oder muss ich die Grafik in ein Div packen und kann weitere Divs als Childs definieren?

Oder muss ich alle Divs manuell mitverschieben, wenn sich die Grafik per Drag&Drop verschiebt?

Wäre super, wenn mir jemand den richtigen Ansatz geben könnte?

Klaus

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Wie Div über Bild zeigen, dass sich mit Bild mitbewegt?

    Beat Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Kann ich Texte als Child eines Bildes erstellen?

    Nein! Das img element erlaubt keine html elemente als children.

    Oder muss ich die Grafik in ein Div packen und kann weitere Divs als Childs definieren?

    ja..

    Oder muss ich alle Divs manuell mitverschieben, wenn sich die Grafik per Drag&Drop verschiebt?

    Du solltest nicht die Grafik verschieben, sondern ein Parent Element
    <div id=map_drag>
      <img id=map_img>
      <div id=map_labels>
       ...
      </div>
    </div>

    map_labels kann hier absolut positioniert sein und würde damit relativ zu map_drag mitverschoben.

    mfg Beat

    --
    Selber klauen ist schöner!
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Wie Div über Bild zeigen, dass sich mit Bild mitbewegt?

      Klaus
      – Informationen zu den Bewertungsregeln

      Du solltest nicht die Grafik verschieben, sondern ein Parent Element
      <div id=map_drag>
        <img id=map_img>
        <div id=map_labels>
         ...
        </div>
      </div>

      Eigentlich hätte ich da ja auch drauf kommen können.
      Aber jetzt kann ich die Grafik nicht mehr bewegen??

      Kannst Du vielleicht einen kurzen Blick auf den eigentlich recht einfachen Code werfen?

      Trage ich target.id == "clipimage" ein, bewegt sich das Bild, Mit "clipdiv" passiert aber nichts.

      <script type="text/javascript">

      var dragobjekt = null;
      var dragx = 0;
      var dragy = 0;
      var posx = 0;
      var posy = 0;

      var clipbreite = 600;
      var cliphoehe = 400;

      function ExtractNumber(value) {
       var n = parseInt(value);
       return n == null || isNaN(n) ? 0 : n;
      }

      function $(id) {
       return document.getElementById(id);
      }

      function draginit() {
       document.onmousedown = OnMouseDown;
       document.onmouseup = OnMouseUp;
      }

      function OnMouseDown(e) {
       if (e == null) e = window.event;
       var target = e.target != null ? e.target : e.srcElement;

      if (target.id == "clipdiv") {

      if ((e.button == 1 && window.event != null || e.button == 0)) {
         posx = e.clientX;
         posy = e.clientY;

      dragx = ExtractNumber(target.style.left);
         dragy = ExtractNumber(target.style.top);

      dragobjekt = target;

      document.onmousemove = OnMouseMove;
         return false;
        }
       }
      }

      function OnMouseUp() {
       document.onmousemove = null;
       dragobjekt = null;
      }

      function OnMouseMove(e) {
       if (e == null) var e = window.event;

      wert1 = (dragx + e.clientX - posx);
       wert2 = (dragy + e.clientY - posy);

      imgx = 1024;
       imgy = 768;
       if (wert1 > 0) {
        wert1 = 0;
       }
       if (wert2 > 0) {
        wert2 = 0;
       }
       if (wert1 < clipbreite-imgx) {
        wert1 = clipbreite-imgx;
       }
       if (wert2 < cliphoehe-imgy) {
        wert2 = cliphoehe-imgy;
       }
       document.getElementById('debuginfo').innerHTML = "X="+wert1+" Y="+wert2;

      dragobjekt.style.left = wert1 + 'px';
       dragobjekt.style.top = wert2 + 'px';

      }

      </script>

      </head>
      <body onLoad="draginit()">

      <div id="clipcontainer" style="position:absolute;top:200;left:200;float: left; width: 600px; height: 400px; overflow: hidden; border: 1px solid black;">
        <div id="clipdiv" style="position:relative;top:0;left:0;">
         <img style="position:relative;top:0;left:0;" id="clipimage" src="natgeo60.jpg" width="1024" height="768" border="0" alt="">
         <div id="label1" style="position:absolute;top:150;left:150;width:10px;height:10px;background:red;"></div>
        </div>
       </div>

      <div id="debuginfo" style="position:absolute;top:150;left:50;border: 1px solid black;">Debuginfo</div>

      </body>
      </html>

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln