Alternating backgrounds?

Dani · 2005-07-28T01:59:38+00:00

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?

BT2005 0 Newbie Poster · 2005-07-28T02:02:26+00:00

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?

tgreer 189 Made Her Cry Team Colleague · 2005-07-28T03:04:09+00:00

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?

BT2005 0 Newbie Poster · 2005-07-28T03:25:42+00:00

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.

tgreer 189 Made Her Cry Team Colleague · 2005-07-28T03:32:14+00:00

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

BT2005 0 Newbie Poster · 2005-07-28T03:38:07+00:00

alright, ill do it server side code

tgreer 189 Made Her Cry Team Colleague · 2005-07-28T04:47:14+00:00

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.

alpha_foobar 5 Junior Poster · 2005-07-28T05:28:27+00:00

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

tgreer 189 Made Her Cry Team Colleague · 2005-07-28T08:47:39+00:00

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!

alpha_foobar 5 Junior Poster · 2005-07-28T09:25:11+00:00

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 5 Junior Poster · 2005-07-28T09:46:39+00:00

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

tgreer 189 Made Her Cry Team Colleague · 2005-07-28T19:41:20+00:00

Wonderful! Thanks for the posts, a_b.

campkev 0 Posting Pro in Training · 2005-07-28T21:01:44+00:00

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;

sjaak 0 Newbie Poster · 2006-08-28T20:09:34+00:00

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