Array von Images aus externe Datei Laden

[frason]

Hallo,

Ich will mich erstens entschuldigen, wenn ich die Frage nicht richtig gestellt wird. Ich habe eine HTML Datei mit JS erstellt, die eine Funktion hat, die Images mit einem Pfeilchen zusammenzubinden (siehe jsfiddle), bis einen Kreis entsteht. Dafür hat jedes Image Koordinaten in dem HTML Body. Ich habe verschieden Variationen von Koordinaten in verschiedenen HTML Dateien gespreichert. Ich will die gerne in einem neuen Datei speichern, damit mit jedem Laden der Seite, verschiedene Koordinaten geladen werden. Ich bin ganz neu in JS, und ich kann das selber nicht hinkriegen. Ich wollte das mit einem JSON Array machen, es kann sein aber, dass das nicht die beste Variante ist. In dem neuen Datei würde ich auch gerne die Variable Highscore und die Walkthrough für jede Variante an Koordinaten haben. Ist so was überhaupt möglich, und wenn ja, wie sieht das aus? Ich werde mich sehr auf Antworten freuen, wo etwas Code zu lesen ist.

Jsfiddle: Edit fiddle - JSFiddle

Ich bedanke mich im Voraus,
Gruss,
frason.

 

[kkapsner]

Ein JS(ON)-Array ist für sowas keine schlechte Wahl, aber wenn du auch noch den Highscore und Walkthrough dort speichern willst, wäre ein Objekt wohl besser geeignet:

{
	coords: [[0, 20], [243, 129]],
	walkthrough: [0, 1],
	highscore: 33
}

 

[frason]

Ich will mich weiter entschuldigun, aber wie gesagt komme ich nicht so gut zurecht mit dem JS. Da kommt noch die Frage, wie kann ich die coords aufrufen auf dem HTML tag. Ich meine ich hab jetzt die JS Datei mit dem Object, wie sieht dann der html<span> tag, damit der selbst die Koordinaten von dem JS Object benutzen kann? Danke!

 

[kkapsner]

Am Besten nimmst du die Daten aus dem JS und baust dir daraus erst deine Nodes zusammen. Das könnten dann in etwas so aussehen:

<script type="text/javascript">
(function(){
	var data = {
		coords: [[0, 20], [243, 129]],
		walkthrough: [0, 1],
		highscore: 33
	}; // data könntest du auch mit AJAX laden...
	for (var i = 0; i < data.coords.length; i += 1){
		var span = document.createElement("span");
		span.innerHTML = "<img src=\"Untitled-4.jpg\" alt=\"\" width=\"35\" height=\"35\" id=\"div" + i + "\">";
		span.style.position = "absolute";
		span.style.left = data.coords[i][0] + "px";
		span.style.top = data.coords[i][1] + "px";
		document.body.appendChild(span);
	}
}());
</script>