Make Layers Appear Over Time

[TicTacWoe]

yes just on load and then theyre just like static no loops or anything.

[TicTacWoe]

sorry i didnt get what you mean at first there, no i just want to be able to add a mouseover swap image behavior to the images once they have been loaded

[Nile]

Change script.js to:

// Made by Nile, http://beta.unlinkthis.net
//DO NOT REMOVE THIS LABEL
var loadimg = function(id, imgs, swap){
	var count = imgs.length;
	var a = setInterval(function(){
		var image = document.createElement('img');
		image.style.position = "absolute";
		image.src = imgs.shift();
		document.getElementById(id).appendChild(image);
		count--;
		if(count == 0){ clearInterval(a); }
	}, 500);
	var swapped = document.createElement('img');
	swapped.style.position = "absolute";
	document.getElementById(id).onmouseover = function(){
		document.getElementById(id).appendChild(swapped);
	};
	document.getElementById(id).onmouseout = function(){
		document.getElementById(id).removeChild(swapped);
	};
};

And then, on your html page, change:

loadimg("image", effect);

To:

loadimg("image", effect, "swap.png");

Change swap.png to your image you want it to be swapped with.

Also, did you want it to go back when you move your mouse away? If not, please tell me, because thats what the above code is aiming to do.
This code is not tested.

[TicTacWoe]

Many thanks again Nile, I'll try that out now and yes I did want it to go back to the original image on mouseout so in theory the code should be fine.

cheers

[Nile]

Ok, tell me your results.

[TicTacWoe]

hmmm so far that isnt working and I've noticed another problem I'm having with this in general. So far I'd only tested this with loaded one image but when I load more than one the second, third images etc just appear on top of the first one. What is it I'm supposed to do to get the images to appear within different layers on the page.

Sorry about all the questions/confusion as you probably guessed im not very experienced with coding!

[Nile]

Ok let me test out the code. For your second problem, do you mean when you try to add another one of these to your pages?

[TicTacWoe]

no I mean I don't know how to work it so that the first image appears within one layer, the second image appears within a different layer and so on.

what I do is replace the names in the following code with the paths of my own files (this is working fine)

new Array('image1.png', 'image2.png', 'image3.png', 'image4.png', 'image5.png');

but I dont quite get what I'm supposed to do nextso that image1 will load in a different layer to image2 as it is theyre all loading on top of one another in the same layer which has the ID 'image'

[TicTacWoe]

is it simply that I need to put the following code in each time for each image that appears?

loadimg("image", effect);
</script>
<style type="text/css">
#image {
width: 200px;
height: 200px;
background-color: #ddd;
}

and then give each layer the same ID as the bit after loading in the above example.

[TicTacWoe]

maybe if you could show me an example which has images being loaded in two or three layers I'd understand this better but right now im very confused!!