Hallo zusammen
Ich arbeite gerade an einer Website, auf welcher man auch eine Karte klicken kann und an dem Ort, wo man drauf klickt, erscheint ein Kreis.
Hier ist ein Ausschnitt aus meinem Code:
HTML und JavaScript
.
.
.
function koordinaten(el, evt) {
var m = mouse_pos(evt);
var p = get_pos(el);
let links = m.left - p.left;
let oben = m.top - p.top;
//neuer div- und img-tag wird erstellt
let container = document.createElement('div');
container.id = 'innen';
const cont = document.querySelector('#aussen');
cont.appendChild(container);
document.getElementById("innen").style.top = oben;
document.getElementById("innen").style.left = links;
let bild = document.createElement('img');
bild.width = 25;
bild.height = 25;
bild.id = 01;
bild.src = 'bilder/kreis.png';
const pic = document.querySelector('#innen');
pic.appendChild(bild);
}
</script>
</head>
<body>
.
.
.
<!-- Start Karte -->
<div id="karte">
<div class="abschnitt_links">
<div id="aussen">
<a href="#">
<img id="bildkoord" src="bilder/karte06.jpg" onclick="koordinaten(this, event)">
</a>
</div>
</div>
</div>
<!-- Ende Karte -->
.
.
.
Alles anzeigen
CSS
.
.
.
#karte {
margin-top: 150px;
float: left;
}
#karte .abschnitt_links #aussen #bildkoord {
width: 62em;
}
#karte .abschnitt_links #aussen #innen img {
width: 25px;
}
#aussen {
position: relative;
}
#innen {
z-index: 10;
position: absolute;
}
.
.
.
Alles anzeigen
(Ich habe den Code gekürzt, damit es ein wenig übersichtlicher ist.)
Mit Javascript werden die Koordinaten auf der Karte (also auf dem Bild "karte06.jpg") ausgelesen und in den beiden Variablen "oben" und "links" beim Klicken auf die Karte gespeichert. Dann wird ein neuer div-Tag erstellt, welcher an der Stelle zu liegen kommt, wo man drauf geklickt hat. Die Angabe der Koordinaten geschieht mit "document.getElementById("innen").style.top = oben;" und "document.getElementById("innen").style.left = links;". Komischerweise werden die die Koordinaten bzw. die Zahlen so nicht "übergeben". Wenn ich z.B. beide Male 150px eingebe anstelle von "oben" und "unten", funktioniert es tadellos.
Ich habe die beiden Variablen bereits mit "alert" ausgeben lassen. Dort klappt es. Was mache ich falsch?
Schon mal vielen Dank im Voraus für Eure Hilfe !
Gruss Adi