[FRAGE] IMage scr auslesen

[lidZ1]

Hallo zusammen,

ich benötige mal eure Hilfe.

Ich erstelle mir in JS ein Array mit allen Bildern aus einem <div> Element

var ele = document.getElementById('los').getElementsByTagName('img');

Kann ich die Bilder an ein anderes <div> Element zum anzeigen übergeben?

Auf die einzelnen Bilder ist ein EventListener, mit dem die Bilder in dem <div> angezeigt werden sollen.

for(i=1;i<ele.length;i++){
ele[i].addEventListener ('mouseover', mouseover , false);
ele[i].addEventListener ('mouseout', mouseout , false);
}

Vielen dank für die Hilfe!

 

[Dormilich]

du könntest schlicht und einfach das Bild in das div einhängen.

 

[lidZ1]

Kann ich es dem <div> Element einfach mitgeben?

document.getElementById('vorschau') = ele[index];
oder mit innerHTML ?

 

[mikdoe]

Ich denke, du müsstest mit createElement() ein neues "img" Tag erstellen und das dann mit appendChild() in das neue div einhängen.

 

[lidZ1]

Kann ich denn nicht das img Element, welches sich ja in ele[] befindet, einfach in das div Element einsetzen?

 

[mikdoe]

Versuch mal, ob das mit appendChild() geht. Hast du jQuery im Projekt?

 

[lidZ1]

Mit appendChild(Element) löscht er nur die Bilder, die ich anklicke, zeigt Sie aber nicht im div Element an.

Das ganze läuft in Wordpress.

<script type="text/javascript">
var ele = document.getElementById('los').getElementsByTagName('img');
for(i=1;i<ele.length;i++){
  ele[i].addEventListener ('click', mouseover , false);
  ele[i].addEventListener ('dblclick', mouseout , false);
}
function mouseover () {
  document.getElementById('vorschau').style.display = "block";
  document.getElementById('vorschau').appendChild(ele[1]);
}
function mouseout () {
  document.getElementById('vorschau').style.display = "none";
  document.getElementById('vorschau').innerHTML  = "";
}
</script>

 

[mikdoe]

Du musst dir unbedingt ordentliche Einrückungen angewöhnen! Wieviele Bilder hat die Seite denn? Du versuchst mit ele[1] das zweite im Array zuzuordnen. Steht dazu nichts in der Fehlerkonsole zu dieser Zeile?

 

[Dormilich]

Mit appendChild(Element) löscht er nur die Bilder, die ich anklicke, zeigt Sie aber nicht im div Element an.

dann mußt du das element vorher klonen, sonst verschiebt JS nur den DOM-Knoten.

 

[kkapsner]

Du hast definitiv Fehler in der Fehlerkonsole und es werden auch nicht auf allen Bildern die Events registriert... bei JS fangen Arrays und HTMLCollections (das ist das, was du von .getElementsByTagName() zurückbekommst) bei 0 an und hören bei ARRAY.length - 1 auf.

Array.prototype.forEach.call(
	document.getElementById('los').getElementsByTagName('img'),
	function(img){
		img.addEventListener(
			"click",
			function(){
				var preview = document.getElementById("vorschau");
				preview.style.display = "block";
				preview.appendChild(this.cloneNode());
			},
			false
		);
		img.addEventListener(
			"dblclick",
			function(){
				var preview = document.getElementById("vorschau");
				preview.style.display = "none";
				preview.innerHTML = "";
			},
			false
		);
	}
);

 

[lidZ1]

Vielen Dank für die Antowort.

Mir ist bewusst das ein Array beim Index 0 anfängt, ich möchte nur nicht das erste Bild in meinem Array haben, deshalb fange ich erst bei 1 an durchzulaufen.

Das Array ist auch mit einem Objekt befüllt(siehe Anhang).



Wie kann ich jetzt aber auf die einzelnen Elemente zugreifen und es in mein Div packen?

 

[mikdoe]

Ist denn der Rest jetzt fehlerfrei? Was sagt die Fehlerkonsole? Wie sieht dein aktueller Code aus?

 

[kkapsner]

Wenn du das erste Element nicht haben willst, kannst du im forEach auch dir den Index geben lassen und dementsprechend weiterarbeiten:

Array.prototype.forEach.call(
	document.getElementById('los').getElementsByTagName('img'),
	function(img, i){
		if (i !== 0){
			...
		}
	}
);