Ankündigung

Einklappen
Keine Ankündigung bisher.

Klickpunkte werden nicht richtig angezeigt

Einklappen

Neue Werbung 2019

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

  • Klickpunkte werden nicht richtig angezeigt

    Hallo Communety,
    Ich habe vor knab einem halben Jahr eine webseite gebaut für ein PC Spiel.
    Da habe ich eine idee für eine funktion gehabt das man doch auf die map punkte setzen kann und diese abspeichern lassen kann.
    Da ich mit php html und css nicht wirklich weiterkam habe ich mich in js reingehangelt.
    Doch nun stehe ich vor einem Problem was seit knapp einem halben Jahr herrscht und zwar ich kann auf das Bild klicken dann erscheint ein Punkt dann klicke ich wieder auf das Bild und der punkt verschiebt sich aber er hinterlässt keinen Punkt.
    Kann mir da jemand helfen wo mein Fehler ist.
    Ich erstelle die punkte mit einer schleife in einem array wie ihr in den nachfolgenden Skripts denke ich mal besser erkennen könnt wie ich.
    Zu mir selbst ich habe nie wirklich js gelernt habe es mir durch googel und anderen sprachen zusammen gedacht und auch Skripts kopiert und abgeändert.

    Ich rufe eine Funktion auf die einen wert in ein Formular übergibt.
    PHP-Code:
    <script type="text/javascript">
    <!-- // JavaScript-Bereich für ältere Browser auskommentieren
     
       function test(Wert)
    {

            
               
       document.getElementById("outputfield").value = Wert;
    }
    // -->
    </script>

    <div class=" box north"><a href="include/deff.php" class=" popup_oeffnen" onclick="<?php echo 'test('.$map->Green['56']['ID'].')'?>"><?php echo "<img src=img/icons/camp_".$map->Green['56']['owner'].".png>";?><span><?php $map->anzeigen(56?></span></a><div class="count"> <?php echo '<script type="text/javascript">countdown('.$map->Green['56']['time'].' )</script>'?></div></div>
    es öffnet sich per klick ein popup das mit Jquery gemacht ist.

    in dem Popup ist ein Formular wo der wert von der Index übergeben wird.

    PHP-Code:
    <form action="deff.php" method="GET" name="deff">
        <fieldset>
            <legend>Registieren</legend>
            <input id="outputfield" name="outputfield" type="text" value=""</input>
            <fieldset><legend>Gestellte Deff</legend>
                <label style="margin-left: 15px;">Pfeilwagen<input type="text" class="integer success" value="" id="pfeili" name="pfeil"></label><br>
            <label>&Uuml; Pfeilwagen<input type="text" class="integer success" name="uepfeil"></label><br>
            <label style="margin-left: 43px;" >Baliste<input type="text"  class="integer success"  name="bali"></label><br>
            <label style="margin-left: 28px;">&Umacr; Baliste<input type="text"  class="integer success" name="uebali"></label><br>
            <label style="margin-left: 59px;" >Kata<input type="text" class="integer success" name="kata"></label><br>
            <label style="margin-left: 44px;" >&Umacr; kata<input type="text" class="integer success" name="uekata"></label><br>
            <label style="margin-left: 59px;">Treb<input type="text" class="integer success" name="treb"></label><br>
            <label style="margin-left: 44px;">&Umacr; Treb<input type="text" class="integer success" name="uetreb"></label><br>
            </fieldset>
    <?php include 'img.php'?>
    <a href="javascript:link()" id="send" type="submit" >Absenden</a>
            

            
            
            
    </form>
    So die aufgerufenen Img.php sieht wie folgt aus diese lädt dann das richtige bilde.

    PHP-Code:
    <img id="canvas"  src="../img/left.png"  >
    <
    div class="box2" name="box2" style="background-color: green; width: 10px; position: absolute;     height: 10px; border-radius: 100%;">
        
    </
    div>
    <
    img
    So und die click.js soll dann jeden mausklick speichern und nachher in die URL packen. Wie gesagt ich habe das strippt abgeändert und geforscht und so kram aber da bleibe ich hängen.

    ich denke mal das ich es mega kompliziert mache und es wahrscheinlich mit jquery einfacher gehen würde aber da ich ka von jquery habe und nicht wirklich plan von js nur so bissel hänge ich halt bedingt fest
    PHP-Code:
                function linkClick() {
                    
    document.getElementById('clicked').value = ++clicks;
                    
                }




                
    document.addEventListener("DOMContentLoaded"initfalse);

                function 
    init()
                {
                    var 
    canvas document.getElementById("canvas");
                    
    canvas.addEventListener("mousedown"getPositionfalse);
                    
                }
                
                function 
    points(){
                    
                }
                
                var 
    clicks 0;
                var 
    = new Number();
                var 
    = new Number();
                function 
    getPosition(event)
                {

                    var 
    canvas document.getElementById("canvas");

                    if (
    event.!= undefined && event.!= undefined)
                    {
                        
    x[clicks] = event.x;
                        
    y[clicks] = 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;
                    
                    
    x[clicks] -= popup.offsetLeft;
                   
    // y[clicks] -= popup.offsetTop;
                    
    y[clicks] += 20;
                    
    x[clicks] += 5;
                    
                                   for (var 
    1<= clicksi++) {
                              
                              
                    
    document.getElementsByClassName("box2")[0].style.left x[i]+"px";
                    
    document.getElementsByClassName("box2")[0].style.top y[i]+"px";
                     
    //      alert(x[i]+","+y[i]);   
                     
                    
    }
                    
    url();

                    
                }
                 var 
    test "url?x1="+x[1]+"&y1="+y[1];
                var 
    dl 2;
                function 
    url() {
                  
                   if (
    clicks 1){
                    for (
    dldl <= clicksdl++){
                  
    test test+"&x"+dl+"="+x[dl]+"&y"+dl+"="+y[dl];
                }
            }else{
                var 
    pfeili;
                  
    pfeili document.getElementById("pfeili").value;
           var 
    uepfeili;
            
    uepfeili document.getElementById("uepfeil").value;
            var 
    bali;
                
    bali document.getElementById("bali").value;
            var 
    uebali;
                
    uebali document.getElementById("uebali").value;
            var 
    kata;
                
    kata document.getElementById("kata").value;
            var 
    uekata;
                
    uekata document.getElementById("uekata").value;
            var 
    treb;
             
    treb document.getElementById("treb").value;
            var 
    uetreb;
                
    uetreb document.getElementById("uetreb").value;
                 
    test "?pfeili="+pfeili+"&uepfeili="+uepfeil+"&bali="+bali+"&uebali="+uebali+"&kata="+kata+"&uekata="+uekata+"&treb="+treb+"&uetreb="+uetreb+"&x1="+x[1]+"&y1="+y[1];
            }
                }
        function 
    link() {
           
                
                
        
    document.getElementById("send").href test;
        } 
    So wie kriege ich hin das bei jedem click auf das Bild ein punkt an der position bleibt und dieser erst verschwindet wen das Formular abgeschickt wird rein praktisch will ich noch das man auswählen kann welche farbe der punkt hat und dieser dann in einem extra array ist aber damit habe ich noch nicht angefangen ist also momentan unwichtig


  • #2
    Kannst du bitte Debugging betreiben und das Problem weiter eingrenzen? Mit den einzelnen Codeteilen möchte ich ungern arbeiten.

    Kommentar


    • #3
      Ich habe das ganze mal auf meine webseite gestellt damit ihr es sehen könnt

      link http://buendi.de/wvw/

      Hier ein Bild wie ihr zur Funktion kommt, bei klicken des umrandeten Symbols auf dem Bild:
      diese seite ist prinzipiel noch nicht online es fehlt noch so einiges
      das ist nur eine vorab Version und wie ihr dan sehen werdet verschwindet der punkt jedes mal wieder er soll aber da bleiben so das man sie nacher sehen kann die ganzen punkte
      ich hoffe ihr könnt an dem beispiel sehen was ich meine


      ich habe mal ein neues script mit jquery erstellt

      PHP-Code:
      <img id='left' src='img/left.png' />


      <
      script type="text/javascript">
          var 
      klick 0;
          var 
      = new Array;
          var 
      = new Array;
          $(
      document).bind('click', function () {
              
      // Add a click-handler to the image.
              
      $('#left').bind('click', function (ev) {
                  var 
      $img = $(ev.target);

                  var 
      offset $img.offset(); // Offset 
                  
      var xMargin = ($img.outerWidth() - $img.width()) / 2;
                  var 
      yMargin = ($img.outerHeight() - $img.height()) / 2;
        
                  
                   
      x[klick] = (ev.clientX xMargin) - offset.left;
                   
      y[klick] = (ev.clientY yMargin) - offset.top;
                   
                
      //  alert('clicked at x: ' + x[klick] + ', y: ' + y[klick]);
                  
      klick++;
              });
          });
          
      $(
      '#left').click(function() {
          $(
      "<div>", {
              
      id"test",
              
      css: {
                  
      "height"'10px',
                  
      "width"'10px',
                  
      "left"x+'px',
                  
      "top"y+'px',
                  
      "background""yellow",
                  
      "position""absolute"
              
      }
          }).
      appendTo('#left');
        
       
      });
      </script> 
      ich habe das problem das ich ka habe wie ich die boxen in das bild bekomme wie ich das img ansteuere

      Kommentar

      Lädt...
      X