Make Layers Appear Over Time

**Nile** · 12-23-2009, 07:29 PM

Sorry for the delay, give me a few minutes and I'll post the code =/.
script.js

Code:

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

HTML:

Code:

<html>
	<head>
		<title>Appearing Layers</title>
		<script type="text/javascript" src="script.js">
			// Made by Nile, http://beta.unlinkthis.net
			// DO NOT REMOVE THIS LABEL
		</script>
		<style type="text/css">
			#image {
				background-color: #ddd;
			}
		</style>
	</head>
	<body>
		<h1>HTML Ipsum Presents</h1>
	       
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
	       
<ol>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ol>

<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>

<ul>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ul>

<pre><code>
#header h1 a { 
	display: block; 
	width: 300px; 
	height: 80px; 
}
</code></pre>
		<div id="image"><noscript><img src="noscript.png" /></noscript></div>
	</body>
			<script type="text/javascript">
		var effect = new Array('image1.png', 'image2.png', 'image3.png', 'image4.png', 'image5.png');
		loadimg("image", effect);
		</script>
</html>

Now, which layer do you want to be swapped?

**TicTacWoe** · 12-23-2009, 07:55 PM

wow thanks, I tried that and now the images appear one by one in a row which is great! The only thing is how do I space the images out like I have in the second link I posted ie. is there a way to have say 5 or 10 pixels between each image?

As for the swapping of the images in theory I'd like to be able to swap any of the images on mousover, with the new image appearing directly on top of the original.

**Nile** · 12-23-2009, 08:10 PM

For image spacing, change:

Code:

		<style type="text/css">
			#image {
				background-color: #ddd;
			}
		</style>

to:

Code:

		<style type="text/css">
			#image {
				background-color: #ddd;
			}
			#image img {
				padding-right: 10px;
			}
		</style>

For swapping, give me a while and I'll make the code.

**TicTacWoe** · 12-23-2009, 08:11 PM

thanks again the padding worked great!

**Nile** · 12-23-2009, 08:20 PM

Great!
Heres the HTML:

Code:

<html>
	<head>
		<title>Appearing Layers</title>
		<script type="text/javascript" src="script.js">
			// Made by Nile, http://beta.unlinkthis.net
			// DO NOT REMOVE THIS LABEL
		</script>
		<style type="text/css">
			#image {
				background-color: #ddd;
				padding-right: 10px;
			}
		</style>
	</head>
	<body>
		<h1>HTML Ipsum Presents</h1>
	       
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
	       
<ol>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ol>

<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>

<ul>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ul>

<pre><code>
#header h1 a { 
	display: block; 
	width: 300px; 
	height: 80px; 
}
</code></pre>
		<div id="image"><noscript><img src="noscript.png" /></noscript></div>
	</body>
			<script type="text/javascript">
		var effect = new Array('image1.png', 'image2.png', 'image3.png', 'image4.png', 'image5.png');
		var swap = new Array('image1_i.png', 'image2_i.png', 'image3_i.png', 'image4_i.png', 'image5_i.png');
		loadimg("image", effect, swap);
		</script>
</html>

Change the swap variable.

And heres script.js:

Code:

// 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');
		var images = new Array(imgs.shift(), swap.shift());
		image.src = images[0];	
		image.onmouseover = function(){ this.src = images[1]; };
		image.onmouseout = function(){ this.src = images[0]; };
		document.getElementById(id).appendChild(image);
		count--;
		if(count == 0){ clearInterval(a); }
	}, 500);
};

**TicTacWoe** · 12-23-2009, 08:44 PM

hurrah! the swap variable worked perfectly! Now, just one or two minor things and then I'll leave you alone

Firstly, is there something a bit wrong with this part of your code-
#header hi a {
display: block;
width: 300px;
height: 800px;
}

because no matter what I change those pixel values to nothing happes.

Basically all I need to know how to do now is to change the overall size and position of the div that contains all of the array images.

EDIT- actually that #header part is nothing to do with what I'm doing is it, it's justpart of your example. Still, can't figure out how to change the size and position of the image layer that contains everything else.

**Nile** · 12-23-2009, 08:59 PM

Yes.
#header hi a {
display: block;
width: 300px;
height: 800px;
}

What does hi mean?

**TicTacWoe** · 12-23-2009, 09:34 PM

sorry don't know why I pasted it with hi it was in it's orignal format that I was curious about.

But I don't get what that part does
#header h1 a {
display: block;
width: 300px;
height: 80px;
}

is the header anything to do with the image array or is it something else altogether.

I tried putting the image div inside another layer and using that layer to control the position and size of the image div but is there a better way of controlling these things?

**TicTacWoe** · 12-23-2009, 10:14 PM

Actually as well as the positioning/sizing thing I do have one final-final request which hopefully is possible.

The way your script works means that all of the images in the array appear one by one horizontally. But on one of the pages on my site i need the images to appear in three horizontal rows, so the first row appears one by one then the second row and then the third. So would it be possible to add two more arrays that have different positions on the page to the first (ie lower down the page) that load once the previous row is completed?

Or maybe all the images could still be in the same array but somehow the second set of images are positioned lower and the same for the third?

sorry for so many questions, all of this was so easily achieved with dreamweavers timeline

**Nile** · 12-23-2009, 10:16 PM

Why don't you keep using the dreamweaver time line? I'll get the code to you soon.

Thread: Make Layers Appear Over Time

Thread Tools

Search Thread

The Following User Says Thank You to Nile For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions