[Peter]

In building a website for my church, I decided to run my own Image Slideshow script. I got the basic parts of it done, but can't figure out how to have the images to crossfade. This is what I have so far:

	<script>
		curImage = 0;
	
		images = [['s1.png','Welcome!','EEC IS AWESOME!'], ['s2.png','Testing!','Another message']];
		s1 = new Image(715,140);
		s1.src = 'wp-content/themes/EEC/images/'+images[0][0];
		s2 = new Image(715,140);
		s2.src = 'wp-content/themes/EEC/images/'+images[1][0];
	
		function next() {
			home = document.getElementById('homeimage');
			desc = document.getElementById('homedesc');
			title = document.getElementById('hometitle');
			
			window.curImage++;
			if (window.curImage >= window.images.length) { window.curImage = 0; }
			
			home.src = 'wp-content/themes/EEC/images/'+window.images[window.curImage][0];
			title.innerHTML = window.images[window.curImage][1];
			desc.innerHTML = window.images[window.curImage][2];
				
		}
		
		function previous() {
			home = document.getElementById('homeimage');
			desc = document.getElementById('homedesc');
			title = document.getElementById('hometitle');
			
			window.curImage--;
			if (window.curImage < 0) { window.curImage = window.images.length-1; }
	
			home.src = 'wp-content/themes/EEC/images/'+window.images[window.curImage][0];
			title.innerHTML = window.images[window.curImage][1];
			desc.innerHTML = window.images[window.curImage][2];
			
		}
	</script>

I know it is messy, but hey, this is my first script that I started from scratch. I tried looking at the code of NTN Homepage, but somehow it just doesn't work. Any ideas?

Thanks!

[Zarel]

Crossfading in HTML+CSS+JS is easy - simply use two layers (the top one would be an absolutely or relatively positioned div), and then gradually increase/decrease the opacity of the one on top.