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:

Recommended Answers

All 14 Replies

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?

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?

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?

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.

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

alright, ill do it server side code

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.

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

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!

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.

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

Wonderful! Thanks for the posts, a_b.

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;

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.