Alternating backgrounds?

hey all, i was wondering if anyone has the code for "Alternating backgrounds", i dont know if that is the term for it, but its where you load a page, and the background is differnt everytime you load that page, do you follow?, well im very new to html and all that, so please dont flip out if i used the wrong words and such :cheesy:

BT2005

Newbie Poster

4 posts since Jul 2005

Reputation Points: 10

Solved Threads: 0

6 Years Ago

0

Well, suppose you had an HTML table ... you would just tell one row to be one color and the next row to be a different color. Are you talking more along the lines of a dynamic script that generates content on-the-fly?

cscgal

The Queen of DaniWeb

Administrator

19,437 posts since Feb 2002

Reputation Points: 1,474

Solved Threads: 231

6 Years Ago

0

i wanted some thing like this, http://pegase.foxalpha.com/

reload the page and see how the background image always changes.

I would i do that?

BT2005

Newbie Poster

4 posts since Jul 2005

Reputation Points: 10

Solved Threads: 0

6 Years Ago

0

You can do this a variety of ways. To give you the best answer, we need to know more about you and your capabilities.

For example, do you do any server-side coding at all? PHP, for example? Or do you want to do this all with client-side code?

tgreer

Made Her Cry

Team Colleague

2,118 posts since Dec 2004

Reputation Points: 227

Solved Threads: 37

6 Years Ago

0

well as i said before, im pretty new, i am good with html and can understand most of it, if you could post the easiest way to do this, then ill give it a shot, I greatly appreciate it.

BT2005

Newbie Poster

4 posts since Jul 2005

Reputation Points: 10

Solved Threads: 0

6 Years Ago

0

It depends. The easiest way is with server-side code. You can't do it with plain HTML.

tgreer

Made Her Cry

Team Colleague

2,118 posts since Dec 2004

Reputation Points: 227

Solved Threads: 37

6 Years Ago

0

alright, ill do it server side code

BT2005

Newbie Poster

4 posts since Jul 2005

Reputation Points: 10

Solved Threads: 0

6 Years Ago

0

Great! Then I suggest you ask the question in the appropriate server-side coding forum. If you're new to it, then I suggest PHP. PHP works by interspersing PHP tags with your HTML tags. When a user browses to a PHP page, the server first interprets the PHP.

So to generate an alternate image, you might have something that looks like:

<img src="<?php $myVariableImage ?>">

The trick, then, is to write PHP code that changes the value of the $myVariableImage string. So, armed with that little bit of foreknowledge, I suggest you go to the PHP forum and ask some questions there.

tgreer

Made Her Cry

Team Colleague

2,118 posts since Dec 2004

Reputation Points: 227

Solved Threads: 37

6 Years Ago

0

no reason why you couldn't do this with javascript, Math.random and the window onload event.

alpha_foobar

Junior Poster

182 posts since May 2005

Reputation Points: 20

Solved Threads: 5

6 Years Ago

0

Yes, that's a client-side approach. You'd have to pre-load graphics. I think the server-side approach is more straightforward. And, as the O.P. was new to web development, I thought he should be exposed to server-side coding. But the thread would benefit from seeing a JavaScript code snippet, if you'd care to post one!

tgreer

Made Her Cry

Team Colleague

2,118 posts since Dec 2004

Reputation Points: 227

Solved Threads: 37

6 Years Ago

0

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).

<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.

alpha_foobar

Junior Poster

182 posts since May 2005

Reputation Points: 20

Solved Threads: 5

6 Years Ago

0

<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>

alpha_foobar

Junior Poster

182 posts since May 2005

Reputation Points: 20

Solved Threads: 5

6 Years Ago

0

Wonderful! Thanks for the posts, a_b.

tgreer

Made Her Cry

Team Colleague

2,118 posts since Dec 2004

Reputation Points: 227

Solved Threads: 37

6 Years Ago

0

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;

campkev

Posting Pro in Training

484 posts since Jul 2005

Reputation Points: 14

Solved Threads: 19

5 Years Ago

0

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).
<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

sjaak

Newbie Poster

1 post since Aug 2006

Reputation Points: 10

Solved Threads: 0

Alternating backgrounds?

This article has been dead for over three months