• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Text via Mausklick einfügen

C

Capa

Neues Mitglied
Hallo an Alle,

ich habe folgendes Vorhaben:
Gegeben ist ein Rechteck der Größe 300 x 400 (Pixel). Ich möchte mittels Mausklick den Buchstaben "X" in dieses
Rechteck schreiben/platzieren. Bei einem weiteren Klick soll ein weiteres "X" gesetzt werden. Dabei sollen die
Zeichen jeweils immer auf die angeklickte Koordinaten gesetzt werden.

Gesucht wird eine Lösung für grundlegende Kenntnisse.

Meine Kenntnisse:
Ich lerne gerade HTML5, CSS3 und JavaScript.

Frage 1: Ist dies ein reines HTML-Problem?
Frage 2: Lässt sich das Problem mit einem Click-Handler lösen?

Viele Grüße&Danke
 
Hallo LeCub,
vielen Dank für Deine Antwort.

Im Anhang ist der Quellcode von einem Spiel, welches ich anhand eines Lehrbuches gebastelt habe.
Es geht darum einen Schatz auf einer Karte zu finden.
Ich möchte nun jeden flaschen Klick auf der Karte mit einem Kreuz (X) markieren.
Das soll das Ziel meiner Übung sein. Mit Hilfe des Quellcode siehst du auch, auf welchem Wissensstand ich mich befinde. Bislang ist es mir nicht gelungen einen Lösung zu finden.
Für jeden Hinweis bin ich sehr dankbar.

Beste Grüße

HTML: 
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset = "utf-8" />
   <title> Finde den versteckten Schatz! </title>
</head>
<body>
   <h1 id="titel"> Finde den versteckten Schatz! </h1>
   <img id="karte" width=400 height=400 src="http://nostarch.com/images/treasuremap.png">
   <p id="abstand"></p>
   <p id="versuche"></p>
   <script src="https://code.jquery.com/jquery-2.1.0.js"></script>
   <script>
   /*Zufallskoordinaten auswählen*/
   var zufallsZahlErmitteln=function(groesse){
     return Math.floor(Math.random()*groesse);
   };

   var breite = 400;
   var hoehe = 400;
   var klicks = 0;

   var ziel = {
     x: zufallsZahlErmitteln(breite),
     y: zufallsZahlErmitteln(hoehe)
   };

   var ermittleTippEntfernung = function(abstand){
     if(abstand < 10){
       return "Ganz heiß!";
     } else if(abstand < 20){
       return "Ziemlich heiß!";
     } else if(abstand < 40){
       return "Heiß!";
     } else if(abstand < 80){
       return "Warm";
     } else if(abstand < 160){
       return "Kalt!";
     } else if(abstand < 320){
       return "Ziemlich kalt!";
     } else{
       return "Eiskalt";
     }
   };
  
   /*Klick-Handler*/
   $("#karte").click(function(ereignis){
     klicks++;
     var abstandErmitteln = function(ereignis, ziel){
       var diffX = ereignis.offsetX-ziel.x;
       var diffY = ereignis.offsetY-ziel.y;
       return Math.sqrt((diffX*diffX)+(diffY*diffY));
     };

     var abstand=abstandErmitteln(ereignis,ziel);
     var tippEntfernung=ermittleTippEntfernung(abstand);
     $("#abstand").text(tippEntfernung);
     if(abstand < 8){
       alert("Du hast den Schatz gefunden - mit " + klicks + " Klicks!");
     }
     $("#versuche").text("Versuche: " + klicks);
   });
   </script>
</body>
</html>
 
Verwende besser Code-Tags, wenn Du Code postest: In der Toolbar oben der 4. Button von rechts. Außerdem verbessert es die Lesbarkeit, wenn Du sinnvoll einrückst, z. B. mit einem online-Beautifier.
Ich würde dein Vorhaben so lösen, dass ich kleine div-Element mit einem X drin oder kleine Grafiken mit einem Kreuz absolut auf der Karte positioniere. Dazu müsstest Du dich mit absoluter Positionierung vertraut machen, z. B. hier:
http://www.html-seminar.de/css-absolute-positionierung.htm
Die Mausposition hast Du ja schon. Du musst sie nur noch so umrechnen, dass Du die Position bezogen auf den umgebenden Kontainer hast und auf ein Raster von der Größe eines Kreuzes.
Die genannten div-Elemente würde ich jeweils beim onclick dynamisch anlegen und in den Container einfügen. Auch darüber musst Du dich informieren, z. B. hier:
http://stackoverflow.com/questions/268490/jquery-document-createelement-equivalent
und hier:
http://api.jquery.com/append/
PS: Ich vergaß, es zu erwähnen: Um die Orientierung zu erleichtern und das Ganze vom übrigen Inhalt der Seite unabhängig zu machen, würde ich die Karte und die Kreuze in einen div-Kontainer legen.
 
Zuletzt bearbeitet von einem Moderator:
Ist im Groben gut umrissen. Beim Click wird ein Blockelement mit 'x' und inline-Style erzeugt, welches offsetX und offsetY als Werte für left und top übernimmt. Allerdings ist es bei 400x400 schwer möglich, den richtigen Pixel zu treffen.
 
Hallo an Alle,

vielen Dank für die vielen Tipps. Einige konnte ich ganz gut nutzen. Leider bin ich noch nicht ganz
so weit wie ich gern wäre.

Zur Vereinfach habe ich die Schatzsuche eine einfache Karte reduziert.
Hier mein bisheriger Code:
HTML: 
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset = "utf-8" />
    <title> Punkte setzen </title>
    <style type="text/css">
    #box1 {
          background-color: orange;
    }
    #box2 {
          background-color: yellow;
    }
    #box1 {
          background-color: orange;
          position: absolute;
          width: 20px;
          height: 20px;
          top:200px;
          left: 200px;
        border: 1px solid blue;
        text-align: center;
        border-radius: 10px;
        z-index: 1;
    }
    #box2 {
          background-color: yellow;
          position: absolute;
          width: 20px;
          height: 20px;
          top: 150px;
          left: 250px;
        border: 1px solid blue;
        text-align: center;
        border-radius: 10px;
    }
    </style>
   
</head>
<body>
    <h1 id="titel"> Punkte setzen </h1>
     <button>Punkte hinzufügen</button>
    <p> </p>
    <img id="karte" width=496 height=350 src="http://www.kids-on-cruise.de/mediapool/81/811807/resources/big_22548987_0_800-565.jpg">

    <script src="https://code.jquery.com/jquery-2.1.0.js"></script>
    <script>
    $(document).ready(function(){
        $("button").click(function(){
                    $("body").append('<div id="box1"> Y </div>');
            $("body").append('<div id="box2"> X </div>');
                });
    });
    </script>  
</body>
</html>
Dazu meine Fragen:
  1. Bisher werden die Punkte in den body geschrieben. Ich würde Sie jedoch in die Karte schreiben. D.h. die top und left beziehen sich jetzt immer auf body und nichtt auf #karte.
  2. Die Koordinaten im css-Teil sind hier statisch. Wie kann ich diese flexibel wählen. Später sollen top und left durch die Mausposition und den Klick vorgegeben werden.
  3. Wie kann ich die beiden Punkte X und Y über zwei Punkte aktivieren? Einen Knopf für X und einen für Y.
Ich freue mich auf eure Unterstützung.

Beste Grüße
 
Bisher werden die Punkte in den body geschrieben. Ich würde Sie jedoch in die Karte schreiben. D.h. die top und left beziehen sich jetzt immer auf body und nichtt auf #karte.
Zum Vergrößern anklicken....
Definiere einen Wrapper, lege die Karte hinein und füge die Kreuze in diesem Wrapper ein. Dann musst Du die Position relativ zum Wrapper berechnen, indem Du dessen Position bzgl. top und left ermittelst und von den Koordinaten der Mausposition abziehst.
Die Koordinaten im css-Teil sind hier statisch. Wie kann ich diese flexibel wählen. Später sollen top und left durch die Mausposition und den Klick vorgegeben werden.
Zum Vergrößern anklicken....
Du kannst auch mit Javascript die Position festlegen auf Grund von Variablen, z. B. so:
Code: 
$("button").click(function(){
                    newEle = $('<div class="box">X</div>');
                    newEle.css({position: "absolute", top: deine_top_position + "px", left: deine_left_position + "px"});
                    $("#wrapper").append(newEle);
                });
Wie kann ich die beiden Punkte X und Y über zwei Punkte aktivieren? Einen Knopf für X und einen für Y.
Zum Vergrößern anklicken....
Ich verstehe nicht, wofür du ein X und ein Y brauchst. Ich dachte, Du willst jedes Mal, wenn man mit der Maus klickt, ein X auf die Karte setzen.
Was ich auch nicht verstehe, ist, wie Du das mit dem Button machen willst. Du brauchst ja die Mausposition auf der Karte und wenn man über den Button geht und klickt, ist diese verloren. Ich meine, Du musst das onclick direkt für die Karte registrieren, so wie Du es in deinem ersten Posting hattest.
 
Liebe Leser und Unterstützer.

Ich komme leider mit meinem Problem nicht weiter.

Zur Vereinfachung versuche ich nun blaue Kreuze "X" auf eine gelbe Fläche durch
anklicken zu setzen.

Hier mein Versuch:
HTML: 
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset = "utf-8" />
    <title> Punkte setzen </title>
    <style type="text/css">
   
    #karte {
        position: absolute;
                   top: 150px;
                   left: 100px;
                   width: 100px;
                   height: 100px;
                   background-color: yellow;
    }
    div{
        color: blue;
    }
    </style>
</head>
<body>
    <h1 id="titel"> Punkte setzen </h1>
   
    <div id="karte">
    Karte
    </div>
    <script src="https://code.jquery.com/jquery-2.1.0.js"></script>

    <script>
    function myFunction(e) {
            var div = document.createElement("DIV");
            var t = document.createTextNode("X");
        div.style.left = e.offsetX + "px";
        div.style.top = e.offsetY + "px";
            div.appendChild(t);
            document.getElementById("karte").appendChild(div);
    }
    </script>
   
<div id="karte" onclick="myFunction(event)"></div>
</body>
</html>
Durch Klicken auf das gelbe Feld erzeuge ich "X". Jedoch verstecken sich sie erst hinter dem gelben Feld. Und die Position des Klicks wird auch nicht verarbeitet.

Ich bitte um Hilfe.

Beste Grüße
 
Das div mit der ID "karte" hast Du zweimal. Lösche das zweite und notiere das onclick beim ersten.
Bei diesem div musst Du position auf relative setzen, bei den Kreuzen jedoch auf absolute:
Code: 
            div.style.position = "absolute";
Mit diesen Änderungen funktioniert es bei mir. Dann brauchst Du nur noch im Wrapper statt des Textes dein Kartenbild einzufügen.
 
Hey,

vielen Dank. Es funktioniert wunderbar.

HTML: 
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset = "utf-8" />
    <title> Punkte setzen </title>
    <style type="text/css">
   
    #karte {
        position: relative;
                   top: 150px;
                   left: 100px;
                   width: 200px;
                   height: 200px;
                   background-color: yellow;
    }
    div{
        color: blue;
    }
    </style>
</head>
<body>
    <h1 id="titel"> Punkte setzen </h1>
    <!--<img id="karte2" position="relative" onclick="myFunction(event)" width=400 height=283 src="http://gc.alexander-hepp.de/schatzkarte.jpg">-->
    <div id="karte" onclick="myFunction(event)">Karte</div>
    <script src="https://code.jquery.com/jquery-2.1.0.js"></script>
    <script>
    function myFunction(e) {
            var div = document.createElement("DIV");
            var t = document.createTextNode("X");
        div.style.position="absolute";
        div.style.left = e.offsetX + "px";
        div.style.top = e.offsetY + "px";
            div.appendChild(t);
            document.getElementById("karte").appendChild(div);
    }
    </script>
</body>
</html>

Dazu noch eine Frage/Auffälligkeit: Wenn ich auf ein vorhandenes X klicke, wird das neue in die linke obere Ecke gepackt. Warum ist das so? Und wie kann ich das unterbinden? Die X können sich durch aus überlagern.

Zudem habe ich nun versucht ein Bild einzufügen und es die "karte" zu ersetzen. Ist mir leider nicht gelungen. Zudem verstehe ich den letzten Kommentar bzgl. des Wrapper nicht.

Viele Grüße
 
Zudem habe ich nun versucht ein Bild einzufügen und es die "karte" zu ersetzen. Ist mir leider nicht gelungen. Zudem verstehe ich den letzten Kommentar bzgl. des Wrapper nicht.
Zum Vergrößern anklicken....
Mit Wrapper meine ich das div "karte". Du musst das Bild dort einfügen:
HTML: 
    <!---->
    <div id="karte" onclick="myFunction(event)"><img id="karte2" position="relative" width=400 height=283 src="http://gc.alexander-hepp.de/schatzkarte.jpg"></div>
 
"Dazu noch eine Frage/Auffälligkeit: Wenn ich auf ein vorhandenes X klicke, wird das neue in die linke obere Ecke gepackt. Warum ist das so? Und wie kann ich das unterbinden? Die X können sich durch aus überlagern."
Zum Vergrößern anklicken....
Das liegt daran, dass Du die Mausposition bezogen auf das aktuelle Element verwendest. Bist Du auf solch einem Kreuz, ist der left- und top-Wert sehr klein. Eingefügt wird das Element jedoch in den Wrapper mit der ID "karte" und landet deshalb oben links. Wenn Du das beheben willst, musst Du die Mausposition relativ zum Dokument verwenden und umrechnen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben