Changing backgrounds

Forum Moderators: open

Message Too Old, No Replies

Changing backgrounds

Changing back and forth between two backgrounds in a loop

Adam5000

5:56 pm on Jul 13, 2006 (gmt 0)

Thank you all for your previous help. You're all fantastic.

What I'm trying to do now is create changing background colors.

I'd like to start out with a yellow background, then after two seconds, have it change to blue, then after two seconds, have it change back to yellow, then after two seconds, have it change back to blue, and so on until the viewer leaves the page. No fading in or out, just a quick change of colors.

Help!

penders

1:19 am on Jul 14, 2006 (gmt 0)

That's very errrm... 'funky'!

I'm not even sure that webpages should be allowed to flash yellow/blue every 2 seconds, but anyway....

It's a JavaScript/CSS issue rather than plain old HTML, so I guess this thread will get moved sometime soon.

To make your whole page flash, set an id and an initial style on your body tag, like so:

<body id="funky" style="background-color:yellow;">

Then, at the end of your page, before the closing </body> tag, paste this:

<script type="text/javascript"> 
<!-- 
var colour = 'yellow'; 
function changeColour() { 
  colour = (colour == 'yellow')? 'blue' : 'yellow'; 
  document.getElementById('funky').style.backgroundColor = colour; 
} 
setInterval('changeColour();',2000); 
//--> 
</script>

The 2000 is in milliseconds (ie. 2 secs). CSS understands 'yellow','blue' and a whole bunch of other colour names.

Enjoy!