Ankündigung

Einklappen
Keine Ankündigung bisher.

Clickposition und arrays

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Clickposition und arrays

    Hallo ihr lieben,

    Ich arbeite seit einiger zeit einer Seite wo ich nun an einem Punkt angelangt bin wo ich seit mehreren Tagen nicht mehr weiter kommen.

    Undzwar will ich das wen man auf ein imag mehrfach klicken kann und dann diese Koordinaten in ein array gespeichert werden.
    dh
    1 click
    X['1'] = coords
    Y['1'] = coords

    2 click
    X['2'] = coords2
    Y['2'] = coords2

    usw

    Da ich eine kompletter javascript noob bin und ich mich nur mit html,css und php auskenne sind die resultate schlecht und ich muss auch sagen ich habe viel viel gegoogelt.
    und habe nun ein script gefunden von: vishalsays.wordpress.com
    wo ich schoneinmal eine normale Variable habe.

    so nun habe ich mit hilfe vom Debbuger und von meinem php wissen versucht etwas dran rum zu schrauben leider ohne Erfolg.
    vielleicht könnt ihr mir helfen wie ich es anstelle das wen ich klicke die coords in ein Array gespeichert werden und beim nächsten das array grade um eins vergrößert wird ich bin am verzweifeln.

    vielleicht denk ansätze wie zb das und das diese Funktion in die Zeile oder ich weis echt net wie ich da anfangen soll das weiter zu bekommen.



    hier mal das script.

    Code:
    <div id="divid" style="width:250px; height:100px; background:#0809fe;"></div>
    <br/><br/> Click to add the coordinates in this text field.<br/>
    <input type="text" name="regcoords" id="regcoords" />
    <div id="coords">Coords</div>
    
    <script type="text/javascript"><!--
    /*
     Here add the ID of the HTML elements for which to show the mouse coords
     Within quotes, separated by comma.
     E.g.:   ['imgid', 'divid'];
    */
    var elmids = ['divid'];
    
    var x, y = 0;       // variables that will contain the coordinates
    
    // Get X and Y position of the elm (from: vishalsays.wordpress.com)
    function getXYpos(elm) {
      x = elm.offsetLeft;        // set x to elm’s offsetLeft
      y = elm.offsetTop;         // set y to elm’s offsetTop
    
      elm = elm.offsetParent;    // set elm to its offsetParent
    
      //use while loop to check if elm is null
      // if not then add current elm’s offsetLeft to x
      //offsetTop to y and set elm to its offsetParent
      while(elm != null) {
        x = parseInt(x) + parseInt(elm.offsetLeft);
        y = parseInt(y) + parseInt(elm.offsetTop);
        elm = elm.offsetParent;
      }
    
      // returns an object with "xp" (Left), "=yp" (Top) position
      return {'xp':x, 'yp':y};
    }
    
    // Get X, Y coords, and displays Mouse coordinates
    function getCoords(e) {
     // coursesweb.net/
      var xy_pos = getXYpos(this);
      var click = 0;
      
      click = click++;
    
      // if IE
      if(navigator.appVersion.indexOf("MSIE") != -1) {
        // in IE scrolling page affects mouse coordinates into an element
        // This gets the page element that will be used to add scrolling value to correct mouse coords
        var standardBody = (document.compatMode == 'CSS1Compat') ? document.documentElement : document.body;
    
        x = event.clientX + standardBody.scrollLeft;
        y = event.clientY + standardBody.scrollTop;
      }
      else {
        x = e.pageX;
        y = e.pageY;
      }
    
      x = x - xy_pos['xp'];
      y = y - xy_pos['yp'];
    
      // displays x and y coords in the #coords element
      document.getElementById('coords').innerHTML = 'X= '+ x+ ' ,Y= ' +y;
    }
    
    // register onmousemove, and onclick the each element with ID stored in elmids
    for(var i=0; i<elmids.length; i++) {
      if(document.getElementById(elmids[i])) {
        // calls the getCoords() function when mousemove
        document.getElementById(elmids[i]).onmousemove = getCoords;
    
        // execute a function when click
        document.getElementById(elmids[i]).onclick = function() {
          document.getElementById('regcoords').value = x+ ' , ' +y;
        };
      }
    }
    --></script>

  • #2
    ICh habe es nun so weit Hinbekommen mit einem anderen skript was ich gefunden habe so langsam steige ich durch die syntax durch js durch.

    Code:
            <style type="text/css">
            #canvas{background-color: #000;}
    
            </style>
    
            <script type="text/javascript">
    
                function linkClick() {
                    document.getElementById('clicked').value = ++clicks;
                    
                }
    
    
    
    
                document.addEventListener("DOMContentLoaded", init, false);
    
                function init()
                {
                    var canvas = document.getElementById("canvas");
                    canvas.addEventListener("mousedown", getPosition, false);
                    
                }
                
                var clicks = 0;
                var x = new Number();
                var y = new Number();
                function getPosition(event)
                {
    
                    var canvas = document.getElementById("canvas");
    
                    if (event.x != undefined && event.y != undefined)
                    {
                        x = event.x;
                        y = event.y;
                    }
                    else // Firefox method to get the position
                    {
                        ++clicks
                        x[clicks] = event.clientX + document.body.scrollLeft +
                                document.documentElement.scrollLeft;
                        y[clicks] = event.clientY + document.body.scrollTop +
                                document.documentElement.scrollTop;
                    }
    
                    x[clicks] -= canvas.offsetLeft;
                    y[clicks] -= canvas.offsetTop;
                    
                                   for (var i = 1; i <= clicks; i++) {
                                       
                              
                    document.getElementById("box2").style.left = x[i]+"px";
                    document.getElementById("box2").style.top = y[i]+"px";
                
                    }
                    url();
    
                    
                }
                 var test = "url?x1="+x[1]+"&y1="+y[1];
                var dl = 2;
                function url() {
                  
                   if (clicks > 1){
                    for (dl; dl <= clicks; dl++){
                  test = test+"&x"+dl+"="+x[dl]+"&y"+dl+"="+y[dl];
                }
            }else{
                 test = "url?x1="+x[1]+"&y1="+y[1];
            }
                }
        function link() {
        document.getElementById("send").href = test;
        }
        function img(zahl){
            
            
            
            
            document.getElementById("canvas").src = 
            
        }
            </script>
    
        </head>
    
        <body>
            
                    
            <img id="canvas" style="background-image: url(../img/map.png)" src="http://www.php.de/img/map.png" ><div id="box2" style="background-color: green;     width: 10px;     height: 10px; position: absolute; border-radius: 100%;"></div>
    <img>
    nun stehe ich noch vor dem Problem das ich wen ich es in mein Seite wo ein popup Fenster mit jquery geöffnet wird der wert vollkommen falsch ist und mein Punkt sonst wo steht nur nicht im bild.
    Ich muss dazu wohl noch die absolut coordinaten abziehen von meiner Bild Position. doch leider finde ich dazu im Internet nur Müll was nicht funktioniert bei mir kann mir da wer noch helfen

    Kommentar


    • #3
      Zitat von Matthiasdk Beitrag anzeigen
      Ich muss dazu wohl noch die absolut coordinaten abziehen von meiner Bild Position. doch leider finde ich dazu im Internet nur Müll was nicht funktioniert bei mir kann mir da wer noch helfen
      versuche die fehelrconsole zu bemühen und zu debuggen.
      ich kann mir nicht vorstelllen, dass dein browser bspw. sowas schluckt:
      Code:
      //(..)
      document.getElementById("canvas").src = 
              
          }
              </script>

      Kommentar


      • #4
        Hallo das mim schreiben des imag src geht wunderbar.
        Das Problem liegt irgendwo bei meinem Popup box die ich mit jquery aufpopen lassen.

        Stehe nun leider vor einem neuen Problem das alte habe ich behoben ich habe mein javascript das ja meine X und Y coordinaten in den link pakt nun muss ich aber noch die formular daten die ich reinschreibe auch in php haben muss ich das mit GetElementByName machen oder wie muss ich das nun lösen oder gibt es da einen einfacheren weg

        Kommentar


        • #5
          http://code.tutsplus.com/tutorials/f...nce--net-23703
          I like cooking my family and my pets.
          Use commas. Don't be a psycho.
          [URL="http://jscouch.de"]Blog[/URL] - [URL="http://coverflowjs.github.io/coverflow/"]CoverflowJS[/URL]

          Kommentar

          Lädt...
          X