Make Layers Appear Over Time

**Nile** · 12-23-2009, 03:09 AM

Replace image1.png with he first layer.. Replace image2.png with the second layer.... etc

**TicTacWoe** · 12-23-2009, 03:20 AM

oh so its thr layers themselves I should be replacing it with? I thought i should be putting in the names of the actual files that should go within those layers (if you get me). So instead of image1.png or whatever I should actually put the name of the layer (which itself would contain the image I want to load) in it's place?

**TicTacWoe** · 12-23-2009, 03:34 AM

very sorry about all this hassle Nile but bare with me here

heres the code from a test page using my images and your code---

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<title>Appearing Layers</title>

<script type="text/javascript" src="script.js">
// Made by Nile, http://beta.unlinkthis.net
// DO NOT REMOVE THIS LABEL
</script>
<script type="text/javascript">
var effect = new Array('images/a.gif', 'images/c.gif', 'images/d.gif');
loadimg("image", effect);
</script>
<style type="text/css">
#image {
width: 80px;
height: 80px;
background-color: #ddd;
}
#apDiv1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
}
</style>

</head>

<body>
<div id="image"></div>
</body>
</html>

now this gives me one layer in which all three images in the array appear over time on top of one another. What do I need to do so that the first image only appears in that layer and then the second appears in a new layer etc

I know I'm being really stupid with this but its verrrrry late in Ireland!

**Nile** · 12-23-2009, 03:34 AM

Umm... okay, say you have 5 layers:
layer1.png - Layer 1
layer2.png - Layer 2
layer3.png - Layer 3
layer4.png - Layer 4
layer5.png - Layer 5

Then it should be:

Code:

var effect = new Array('layer1.png', 'layer2.png', 'layer3.png', 'layer4.png', 'layer5.png');

**TicTacWoe** · 12-23-2009, 03:44 AM

i understand that part, but they still all load in the same position for me

**Nile** · 12-23-2009, 03:46 AM

Do you mean the same spot? This is because there not positioned right in the image, if you don't understand that, I'll explain it tomorrow.

**TicTacWoe** · 12-23-2009, 03:49 AM

well yeah, what I have working is the following- the page loads, the images/layers appear one by one fine and in the right order etc but they all just appear right on top of each other, i want them to appear in different positions on the page.

**Nile** · 12-23-2009, 03:51 AM

Link to your page?

**TicTacWoe** · 12-23-2009, 01:13 PM

ok I uploaded a very simple test of the problem here http://clockworkorchestra.com/

as you can see the 3 images load one after another fine but I can't control where they upload to. I want them to load into different positions on the page but using the code you gave me they all load into the div named "image" on top of one another and no matter what I've tried I havn't been able to get them to load one by one into separate layers.

I've also uploaded an example of what Im trying to achieve here (this is using timelines from an old version of dreamweaver which are no longer supported by all browsers or even in dreamweaver anymore) http://clockworkorchestra.com/nu.html
so here you see the three images appear one by one over time in different layers.

I know this is something really simple and I'm being stupid here but I havn't really done something like this on a website before