Text via Mausklick einfügen

Capa · 7. Dezember 2015 um 13:17

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

LeCub · 7. Dezember 2015 um 15:28

Nein

Ja.
Du könntest das mit CSS oder Javascript regeln. Je nachdem was du möchtest, mit JS ist es allerdings einfacher

Capa · 7. Dezember 2015 um 16:52

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]

Finde den versteckten Schatz!

[/html]

system · 7. Dezember 2015 um 19:40

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.

Tronjer · 7. Dezember 2015 um 20:20

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.

Capa · 12. Dezember 2015 um 19:48

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]

Punkte setzen #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; }

Punkte setzen

Punkte hinzufügen

<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>

[/HTML] Dazu meine Fragen: [ol] [li]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.[/li][li]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.[/li][li]Wie kann ich die beiden Punkte X und Y über zwei Punkte aktivieren? Einen Knopf für X und einen für Y.[/li][/ol] Ich freue mich auf eure Unterstützung.

Beste Grüße

system · 13. Dezember 2015 um 00:17

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.
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.
Du kannst auch mit Javascript die Position festlegen auf Grund von Variablen, z. B. so:

$("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.
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.

djheke · 13. Dezember 2015 um 07:58

Damit das auch funktioniert, brauch der Wrapper die Angabe - position:relative:

Capa · 13. Dezember 2015 um 13:29

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]

Punkte setzen

#karte {
    position: absolute;
               top: 150px;
               left: 100px;
               width: 100px;
               height: 100px;
               background-color: yellow;
}
div{
    color: blue;
}
</style>

Punkte setzen

<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>

[/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

system · 13. Dezember 2015 um 16:02

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:

            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.

Capa · 13. Dezember 2015 um 19:56

Hey,

vielen Dank. Es funktioniert wunderbar.

[HTML]

Punkte setzen

#karte {
    position: relative;
               top: 150px;
               left: 100px;
               width: 200px;
               height: 200px;
               background-color: yellow;
}
div{
    color: blue;
}
</style>

Punkte setzen

Karte

[/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

system · 13. Dezember 2015 um 21:50

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.
Mit Wrapper meine ich das div „karte“. Du musst das Bild dort einfügen:
[HTML]

[/HTML]

system · 13. Dezember 2015 um 21:56

„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.“
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.