AJAX

Alternating backgrounds?

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: May 2005

Posts: 182

Reputation: alpha_foobar is an unknown quantity at this point

Solved Threads: 3

alpha_foobar alpha_foobar is offline

Offline

Junior Poster

Re: Alternating backgrounds?

#11

Jul 28th, 2005

Actually, using this type of mechanism, the images are loaded on demand....

For an example of ondemand loading of images, check out this page: http://homepages.ihug.co.nz/~jlittle/imgs/images.html

You'll see images are loaded when you click on them.. and if your connection is slow enough, you should also see a please wait message (though I've found this doesn't always seem to work so well in IE).

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
 
<html>
<script type="text/javascript">
	var images = new Array("a.png", "b.png", "c.png");
 
	function randomImageSelector(){
		var imageNode = document.getElementById("randomImage");
 
		var index = Math.floor(Math.random() * images.length);
		imageNode.src = images[index];
		imageNode.alt = images[index];
	}
 
	window.onload = function(){
		randomImageSelector();
	};
</script>
 
<body>
 
<img src="placeHolder.png" id="randomImage"/>
 
</body>
</html>
<html>
<script type="text/javascript">
	var images = new Array("a.png", "b.png", "c.png");
	
	function randomImageSelector(){
		var imageNode = document.getElementById("randomImage");
		
		var index = Math.floor(Math.random() * images.length);
		imageNode.src = images[index];
		imageNode.alt = images[index];
	}
	
	window.onload = function(){
		randomImageSelector();
	};
</script>

<body>

<img src="placeHolder.png" id="randomImage"/>

</body>
</html>

A way of 'always' getting a different image is to implement a time based seed... this can be calculated in to avoid random providing the same image each load... a large set of images to choose from will also help.

alphafoobar
Senior Java Developer
web2.0 javascript/ajax developer & entrepreneur

•

Join Date: May 2005

Posts: 182

Reputation: alpha_foobar is an unknown quantity at this point

Solved Threads: 3

alpha_foobar alpha_foobar is offline

Offline

Junior Poster

Re: Alternating backgrounds?

#12

Jul 28th, 2005

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
 
<html>
<script type="text/javascript">
	var images = new Array("http://homepages.ihug.co.nz/~jlittle/imgs/NZULtWt3rdOpen8.jpg", 
		"http://homepages.ihug.co.nz/~jlittle/imgs/OpenMensRace.jpg", 
		"http://homepages.ihug.co.nz/~jlittle/imgs/vic_snr_8_2003.jpg", 
		"http://homepages.ihug.co.nz/~jlittle/imgs/vic_8_2_2003.jpg");
 
	function randomImageSelector(){
		var imageNode = document.getElementById("randomImage");
 
		//var index = Math.floor(Math.random() * images.length);
 
		// getTime returns number of ms since 1/1/1970 - regardless of how you tell the time.
		// since my image set here is quite small, this doesn't really provide a much different
		// response than the random implementation.
 
		// to get a better result, you could try getSeconds or even getMinutes...
		// these return a number between 0-59 ... 
		var index = (new Date().getTime())%images.length;
 
		imageNode.src = images[index];
		imageNode.alt = images[index];
 
		document.getElementById("ms").innerHTML = index;
	}
 
	window.onload = function(){
		randomImageSelector();
	};
</script>
 
<body>
 
<img src="" id="randomImage"/>
 
<div id="ms"></div>
 
</body>
</html>
<html>
<script type="text/javascript">
	var images = new Array("http://homepages.ihug.co.nz/~jlittle/imgs/NZULtWt3rdOpen8.jpg", 
		"http://homepages.ihug.co.nz/~jlittle/imgs/OpenMensRace.jpg", 
		"http://homepages.ihug.co.nz/~jlittle/imgs/vic_snr_8_2003.jpg", 
		"http://homepages.ihug.co.nz/~jlittle/imgs/vic_8_2_2003.jpg");
	
	function randomImageSelector(){
		var imageNode = document.getElementById("randomImage");
		
		//var index = Math.floor(Math.random() * images.length);
		
		// getTime returns number of ms since 1/1/1970 - regardless of how you tell the time.
		// since my image set here is quite small, this doesn't really provide a much different
		// response than the random implementation.
		
		// to get a better result, you could try getSeconds or even getMinutes...
		// these return a number between 0-59 ... 
		var index = (new Date().getTime())%images.length;
		
		imageNode.src = images[index];
		imageNode.alt = images[index];
		
		document.getElementById("ms").innerHTML = index;
	}
	
	window.onload = function(){
		randomImageSelector();
	};
</script>

<body>

<img src="" id="randomImage"/>

<div id="ms"></div>

</body>
</html>

alphafoobar
Senior Java Developer
web2.0 javascript/ajax developer & entrepreneur

•

Join Date: Dec 2004

Posts: 1,655

Reputation: tgreer is an unknown quantity at this point

Solved Threads: 35

tgreer

Offline

Made Her Cry

Re: Alternating backgrounds?

#13

Jul 28th, 2005

Wonderful! Thanks for the posts, a_b.

•

Join Date: Jul 2005

Posts: 483

Reputation: campkev is an unknown quantity at this point

Solved Threads: 19

campkev

Offline

Posting Pro in Training

Re: Alternating backgrounds?

#14

Jul 28th, 2005

you could even do away with the need for the array if you named your images sequentially. Using alpha_foobar's code to start, let's say you had 4 images. Name them 0.png, 1.png, 2.png and 3.png

change
var index = (new Date().getTime())%images.length;
to
var index = (new Date().getTime())%4;

and change
imageNode.src = images[index];
to
imageNode.src = index + ".png";

Then when you want to add another picture to the list, just name it 4.png and change
var index = (new Date().getTime())%4;
to
var index = (new Date().getTime())%5;

•

Join Date: Aug 2006

Posts: 1

Reputation: sjaak is an unknown quantity at this point

Solved Threads: 0

sjaak

Offline

Newbie Poster

Re: Alternating backgrounds?

#15

Aug 28th, 2006

•

Originally Posted by alpha_foobar

Actually, using this type of mechanism, the images are loaded on demand....

For an example of ondemand loading of images, check out this page: http://homepages.ihug.co.nz/~jlittle/imgs/images.html

You'll see images are loaded when you click on them.. and if your connection is slow enough, you should also see a please wait message (though I've found this doesn't always seem to work so well in IE).
Help with Code Tags

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
 
<html>
<script type="text/javascript">
    var images = new Array("a.png", "b.png", "c.png");
 
    function randomImageSelector(){
        var imageNode = document.getElementById("randomImage");
 
        var index = Math.floor(Math.random() * images.length);
        imageNode.src = images[index];
        imageNode.alt = images[index];
    }
 
    window.onload = function(){
        randomImageSelector();
    };
</script>
 
<body>
 
<img src="placeHolder.png" id="randomImage"/>
 
</body>
</html>
<html> <script type="text/javascript"> var images = new Array("a.png", "b.png", "c.png"); function randomImageSelector(){ var imageNode = document.getElementById("randomImage"); var index = Math.floor(Math.random() * images.length); imageNode.src = images[index]; imageNode.alt = images[index]; } window.onload = function(){ randomImageSelector(); }; </script> <body> <img src="placeHolder.png" id="randomImage"/> </body> </html>
A way of 'always' getting a different image is to implement a time based seed... this can be calculated in to avoid random providing the same image each load... a large set of images to choose from will also help.

******************************
I understand your answer is from quit a while ago, but since I'm new on this forum I'm responding just now. I too want to have alternating pictures when reloading in a non-server-based way, but realy alternating and no repeating of the same image. You write about a time based seed. Can you tell me more about that. Or is ther a totally different way to do it. After all, your method IS randomizing, and not alternating!
Thanx, Sjaak