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 0 Newbie Poster
Dani 4,310 The Queen of DaniWeb Administrator Featured Poster Premium Member
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
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
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
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
It depends. The easiest way is with server-side code. You can't do it with plain HTML.
BT2005 0 Newbie Poster
alright, ill do it server side code
tgreer 189 Made Her Cry Team Colleague
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
no reason why you couldn't do this with javascript, Math.random and the window onload event.
tgreer 189 Made Her Cry Team Colleague
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
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
<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
Wonderful! Thanks for the posts, a_b.
campkev 0 Posting Pro in Training
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
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.