image change behind navigation when page reloads? how?

[beka]

i would like to duplicate this sites home page:
http://www.sukshuglie.com/ i do not see the answer in the source...each time you visit the site or reload the page a new image is displayed behind the navigation..
I want the image to change along with the accomanying background color(s).
i do not want the whole background to be a tiled changing image, just the main image and colors.....thank you!!

[MuNKyonline]

It's in the ASP server-side script. I thought it might be javascript changing the css or something but unfortunately it's not. You could ask the design company how they did it. Is there anyone else here who knows a way of doing this?

[ADAM Web Design]

I haven't done it this exact way myself, but I have done something very similar to it on a website I worked on 3 years ago (hence the reason the HTML code isn't the greatest):

<%
Randomize
Dim RandomPic
RandomPic = CInt (rnd * 3) + 1
if RandomPic < 1 then
	RandomPic = 1
end if
if RandomPic > 3 then
	RandomPic = 3
end if
Response.Write "<TR>"
Response.Write "<TD COLSPAN=3>[img][/img]</TD>"
Response.Write "</TR>"
%>

To see the code in action, click here and refresh the page a few times. It should rotate between 3 backgrounds.

[speed]

You can use PHP to dynamically generate a style sheet to control just the elements you need to colour. You can probably use ASP but I'm not an ASP person.

There's a couple of articles at http://codewalkers.com/tutorials/75/1.html and http://www.barelyfitz.com/projects/csscolor/ which show style sheet generation with PHP.

In your normal style sheet you have the default definition e.g.:

.random {
    width: 300px;
    height: 300px;
}

Then after you've included the default style sheet include the dynamic one with:

<link rel="stylesheet" type="text/css" media="screen" href="style.php" />

The style.php is:

<?php
header("Content-type: text/css");
switch(rand(0, 2)) {
case 0:
?>
.random { background-color: #f00; }
<?php
    break;
case 1:
?>
.random { background-color: #0f0; }
<?php
    break;
case 2:
?>
.random { background-color: #0f0; }
<?php
    break;
}
?>

Then in the HTML simply assign the .random class to the element to style randomly. I've only changed the background colour but you can change any property and also change many classes at once with this method.

If you use this method don't put all your styles in the PHP, only put what you have to as the PHP style sheet won't be cached by the browser.

If you don't have server side scripting support then you can use JavaScript to change the styling on elements, if you do this you need to ensure that the default style looks reasonable for people who run with JavaScript disabled.

[beka]

wow..thanks guys...i am neither a php or an asp person....not even sure what they are, though am aware of their existence....i guess it's not a simple thing to duplicate this pages dynamic...? i don't really understand how to implement either of the responses...I'm a noob of sorts and that stuff just flew over my little head....i use css, simple java scripts and can create simple flash animations, but just am not sure how to procedd witht the answers that you all have given me....can your replies be "dumbed" down a bit for this thick head of mine??
thks....

[ADAM Web Design]

ASP and PHP are server-side programming languages. This means that, unlike a client-side language such as HTML or Javascript, the code that generates the final output isn't accessible via viewing the source. All of it is processed on the server, and then outputted to the browser via a client-side language.

In other words, you use ASP and PHP in conjunction with HTML, CSS, and/or Javascript to create a dynamic page.

What you need to do from here is figure out which server-side languages (if any) your host supports. From there, you need to learn the language(s) supported.

[speed]

If we assume your server can support PHP then upload the style.php from my last post, if you then access that file from the browser you will see a style sheet with 1 class in it called .random. If you keep refreshing then you will see that the background colour changes, there are 3 possible colours.

To actually use the style sheet add:

<link rel="stylesheet" type="text/css" media="screen" href="style.php" />

To the head area of normal web page, then locate the element that you want to apply the style to, so for example if it's a table cell <td> you would edit the <td> to be <td class="random">

Now each time you refresh the page the style sheet should be reloaded and the table cell should change colour to one of the 3 possibilities.

In the PHP where you have:

?>
.random { background-color: #f00; }
<?php

you can add more CSS styles before and after the line holding .random, you will need to add the additional styles in all 3 positions within the PHP.

I hope that is a little clearer.

[beka]

thank you...it's sort of becoming clearer as I read and re-read and try to appply it to my html pages...but i must still be doing something wrong as it's not working...maybe i'll let it go for the night and try agin tomorrow...again thank you so much for your expertise...sorry for my thick head....urg...:~%

[speed]

If it's not working then it may be because your server doesn't support PHP or ASP whichever you are using.

If you access the style.php from a web browser do you see a style sheet i.e.

.random { background-color: #f00; }

If not then either there's a typo in the script or your server doesn't support PHP.

If your test page is on a public web server post the URL then we can have a look.

[MuNKyonline]

Do you mind if I have a copy of that speed? I recon that'll come in handy at some point! I've been wondering how to do something like that for a while.