Javascript Markierung auf Bild onclick

Habe ich diese Karte, die Koordinaten in die Eingabefelder, wenn Sie klicken Sie auf die Karte. Es wäre toll, um einen marker auf die Karte setzen, die zeigen, wo geklickt wurde.

Einzige Sache ist, dass die Beispiele, die ich finden wird lassen Sie alle Punkte auf der Karte, wenn Sie erneut darauf klicken, während Sie ich brauche nur einen marker auf die Letzte position klickte auf das Bild.
Jeder kann helfen mit diesem?
Es ist wie diese oder diese Beispiel. Der erste ist gut, aber wird Ortsmarkierung Bild unter dem Bild selbst und der zweite wird lassen Sie alle Punkte auf dem Bild.

Alle Hilfe ist willkommen!

Erhalten Sie die Logik. Nun entfernen Sie frühere, könnten Sie eine Klasse oder id oder was auch immer und entfernen Sie alle vorherigen, e.g: jsfiddle.net/95vczfve/37
Gut, dass ist genau das, was ich suchte. Javascript ist sicherlich nicht mein Fachgebiet, so war es am besten zu Fragen. Vielen Dank! @A. Wolff
Hmm, das ist das hinzufügen einer div um den Körper und dann den Punkt in das div, aber das wird nicht funktionieren, für ein Bild? Wenn ich es tun, wird hinter dem Bild, das ich denke,
Dann dies ist nicht, was Sie suchen. Sie sollten die Suche für "Bild Bearbeiten mit Leinwand -" aber das ist abhängig von der same-origin-policy. Siehe e.g: stackoverflow.com/questions/32053687/..., Aber wieder, Sie würde entfernen müssen previoud marker

InformationsquelleAutor dnsko | 2016-06-29

javascript jquery

2

Ausweitung der akzeptierten Lösung auf Fügen Sie eine Markierung, um ein Bild in javascript?

Habe ich nur noch eine eindeutige Klasse zu den Anhängen div und dann entfernt alle Elemente mit dieser Klasse auf jedes click-Ereignis.

MODIFIZIERTE CODE:
```
$(document).ready(function(){ 
    $(document).click(function (ev) {
        if($('div').length < 3) {
            $(".marker").remove();      //remove all existing markers
            $("body").append(            
                $('<div class="marker"></div>').css({       //include a class
                    position: 'absolute',
                    top: ev.pageY + 'px',
                    left: ev.pageX + 'px',
                    width: '10px',
                    height: '10px',
                    background: '#000000'
                })              
            );
        }
    });

});
```
Siehe die Aktion: JSFIDDLE

Update, wie gewünscht, in Kommentar: FIDDLE
- Danke, aber wie ich sagte den anderen, das wird fügen Sie den Körper und wird nicht möglich sein, für eine tatsächliche <img>? Da Sie das hinzufügen eines div zu. Ich bin mir nicht sicher, @Fr0zenFyr
- das update angezeigt. Ich habe einfach das image-tag innerhalb <body></body> und verwendet so ziemlich das gleiche javascript.
- der trick ist, die position der Markierung als absolute - und den Eltern-container als relative was bereits da ist. Wenn dies immer noch nicht, was Sie wollen, dann werde ich wohl nicht verstehen, Ihre Anforderung klar.
- Ja das ist genau das, was ich will, Hauptsache ist, dass ich einfach nicht bekommen es für mich arbeiten. Die Seite ist voll von Formen, Tasten und ein Bild zuordnen. Überall dort, wo ich Sie in den Körper wird der quadratische marker, außer wenn ich auf das Bild (so wie es scheint, legt Sie hinter den Bildern, auf die der Körper selbst). @Fr0zenFyr
- Ich glaube nicht, dass dem so ist, können Sie nach einer Geige mit Ihren HTML-markup und JS so kann ich einen Blick?
- Erstellt habe ich ein Turnschuh hier. Es ist ein Allgemeines Projekt, daher die kleine html-aber es sollte geben eine Vorstellung von der Struktur ist für das Bild (ich wählte eine zufällige Karte für diese). Hoffe, das hilft ein bisschen @Fr0zenFyr
- Können Sie dies überprüfen, Geige. Ich habe gerade die entsprechende HTML-von Ihrer Geige zu demonstrieren, die es gibt. Auch anstelle von onclick="point_it(event)" in HTML, die Sie tun können, dass Sachen, die in javascript wie $("#pointer_div").on('click', function(event) { ... }) .
- Genau das ist es! Vielen Dank für die Mühe! @Fr0zenFyr
- Froh, dass ich helfen konnte. Wenn Sie denken, dass die Antwort Ihnen geholfen hat, können Sie akzeptieren die Lösung, indem Sie auf das Häkchen Links von meiner Antwort und wahrscheinlich upvote es auch? 🙂
- Natürlich! Done @Fr0zenFyr
InformationsquelleAutor Fr0zenFyr

Nicht die beste Methode, aber die einfachste, die ich coult denken
Kürzeste code, den ich machen könnte, um es zu tun:

<!doctype html>
<html>
    <head>
        <title>
            Bla!
        </title>
        <style type='text/css'>
            div.divImgContainer { position:absolute; top:10px; left:10px; bottom:10px; right:10px;  border: 1px solid black; }
            div#divMark { position:absolute; top:-100px;  left:-100px; background-color:red; width:3px; height:3px;}
        </style>
        <script type='text/javascript'>
            function ShowMarker(event) {
                //console.log (event);
                console.log (event);
                var mark = document.getElementById('divMark');
                mark.style.top =  (event.clientY)+'px';
                mark.style.left = (event.clientX) +'px';
            }
        </script>
    </head>
    <body>
        <div class='divImgContainer' onclick='ShowMarker(event);'>
            <!-- set image as background to this div -->
        </div>
        <div id='divMark' ><!-- you can change the "x" to image of marker if needed --></div>
    </body>
</html>

InformationsquelleAutor Guy Dafny

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.