Bildarrays nebeneinander platzieren (einblenden)

[graphica]

Hallo,

ich würde gerne 4 Bildarrays nebeneinander positionieren und die Bilder die darin liegen austauschen. Zwischen den Bildern sollen jeweils immer in etwa 0,3 Sekunden Unterschied (Überblendungszeit) sein.
Bild 1a wird nach 4 Sekunden ausgeblendet - darunter erscheint das nächste (b1)
Bild 2a wird nach 4,3 Sekunden ausgeblendet - darunter kommt das nächste (b2).

Ich habe den entsprechenden Code für die Überblendung eines Arrays bereits gefunden. Jedoch schaffe ich es nicht, die Arrays nebeneinander zu positionieren und wie beschrieben ein und auszublenden.

Anbei der Code:

<script type="text/javascript">
function imageLine()
{
var checkInterval = null,
imageLineInterval = null,
currentImage = -1;
/*
Variablen die man in
verschiedenen Funktionen benötigt
*/
images = new Array(
'file:///Progs/Users/Desktop/Roman/javascript/images/a1.JPG',
'file:///Progs/Users//Roman/javascript/images/b1.JPG',
'file:///Progs/Users/Roman/javascript/images/c1.JPG'

		);  
	  
	loadingImages = new Array();  
	// Dieses Array enthält später alle Objekte  
	  
	this.run = function()  
	{  
		checkInterval = window.setInterval('this.checkIfLoaded();', 100);  
		// Alle 100 Millisekunden prüfen ob alle Bilder geladen sind  
		for(i = 0;i < images.length;i++)  
		{  
			image = images[i];  
			loadingImages.push(new Image);  
			loadingImages[i].src = image;  
		}  
		/\*  
			Alle Images in dem Array einzeln Durchgehen.  
			Das Array für die Objekte mit den Objekten füllen.  
			Dem neuen Objekt die Url des momentanen Bildes geben.  
		\*/  
	}  
	  
	this.checkIfLoaded = function()  
	{  
		allLoaded = true;  
		for(i = 0;i < loadingImages.length;i++)  
		{  
			loadingImage = loadingImages[i];  
			if(!loadingImage.complete)  
				allLoaded = false;  
		}  
		/\*  
			Alle Objekte durchgehen.  
			Prüfen ob das aktuelle Objekt / Bild geladen ist.  
			Falls nicht dann die Variable zur Prüfung auf false setzen  
		\*/  
		if(allLoaded)  
		{  
			// Wenn alle Objekte / Bilder geladen sind  

			// Die Interval für das Prüfen löschen  
			window.clearInterval(checkInterval);  
			// Das erste Bild anzeigen  
			this.startImageLine();  
			// Die Funktion für das Bilder wechseln alle 10 Sekunden ausführen  
			window.setInterval('this.startImageLine();', 10000);  
		}  
	}  
	  
	this.startImageLine = function()  
	{  
		this.showImage();  
		// Bild anzeigen  
		if(currentImage == (loadingImages.length - 1))  
			currentImage = 0;  
		else  
			currentImage += 1;  
		/\*  
			Aktuelles Bild um eins hochzählen.  
			Sollte das momentane Bild genau so groß sein,  
			wie das Array dann wieder beim ersten anfangen.  
		\*/  
		  
		element = document.getElementById('imageline');  
		// Element für die Bilderanzeige  
		element.style.height = loadingImages[currentImage].height + 'px';  
		element.style.width = loadingImages[currentImage].width + 'px';  
		// Dem Element die Breite und Höhe des momentanen Bildes geben  
		element.style.backgroundImage = 'url(' + loadingImages[currentImage].src + ')';  
		// Dem Element das aktuelle Bild als Hintergrundbild setzen  
		  
		window.setTimeout('this.hideImage();', 9500);  
		// Das Bild in 9,5 Sekunden ausblenden  
	}  
	  
	this.hideImage = function()  
	{  
		element = document.getElementById('imageline');  
		for(i = 0;i <= 100;i++)  
			window.setTimeout('element.style.filter = "Alpha(opacity=' + (100 - i) + ')"; element.style.MozOpacity = ' + (1 - i / 100) + '; element.style.opacity = ' + (1 - i / 100) + ';', i \* 5);  
		// Von 0 bis 100 (Prozent)  
		// Das i \* 5 dient dazu, dass das Ausblenden nicht zu schnell geht  
	}  
	  
	this.showImage = function()  
	{  
		element = document.getElementById('imageline');  
		for(i = 0;i <= 100;i++)  
			window.setTimeout('element.style.filter = "Alpha(opacity=' + i + ')"; element.style.MozOpacity = ' + i / 100 + '; element.style.opacity = ' +  i / 100 + ';', i \* 5);  
		// Hier das selbe wie bei hideImage  
	}  
	  
	this.run();  
}  
  
window.onload = function()  
{  
	imageLine();  
}  

</script>

<p id="imageline"></p>

Ich bin über jegliche Hilfe, wie ich das Problem lösen könnte überaus dankbar!!

[LX]

Hallo!

Dein Code ist unübersichtlich (was die übermäßige Kommentierung wohl ausgleichen soll) und zeigt zudem, dass Du ein wesentliches Konzept der Objektorientierung (nämlich, worauf sich "this" bezieht) nicht richtig verstanden hast.

Die Positionierung ist kein JS-Problem, sondern leicht mit CSS zu bewältigen. Packe die Image-Paare, die überblendet werden sollen, in ein div mit float: left, fester Größe und position:relative.

Gruß, LX