JavaScript PLUS CSS

**PHP_INNER** · Mar 9, 2007 13:40

I Need help.
I dunno nothing about javacript, but i need a script that does this logic:

PHP Code:




If Time() >= 8:00 and < 13:00 then the page's background picture is "back1.jpg"



If Time() >= 13:00 and < 19:00 then the page's background picture is "back2.jpg"



If Time() >= 19:00 and <= 23:59 then the page's background picture is "back3.jpg"



If Time() >= 00:00 and < 8:00 then the page's background picture is "back4.jpg"

I dont know how you do the changes to the <Body> tag's picture trought javascript so i wrote "the page's background picture is "back1.jpg"".

If you could get me a script that do that.

Thanks!

**Mittineague** · Mar 9, 2007 16:11

This reminds me of an old homework assignment I once had. I forgot how I did it now, but I think I found the answer at the HTMLgoodies site listed under "stupid javascript tricks" if my memory serves.

**Raffles** · Mar 9, 2007 16:16

Best to do the stupid trick on the server side anyway. Get the time, embed body {background:url(whatever.jpg);} into the <head>.

Think about how much it might annoy the user it's not consistent every time. If it's not overpowering it might be OK, but in general consistency is a pretty good thing.

**PHP_INNER** · Mar 10, 2007 04:13

Too many results shown in html goodies, but i cant find a script that changes the background picture.

**Raffles** · Mar 10, 2007 04:47

What server-side language are you using? Do it with that. I suppose this would be a way to do it with javascript, but again, this would be best done on the server side.

Code:

window.onload = function() {
  var date = new Date();
  var hour = date.getHours();
  var i; 
  if (hour <= 8) i = 1;
  else if (hour <= 13) i = 2;
  else if (hour <= 19) i = 3;
  else if (hour <= 23) i = 4;
  else i = 1;
  body.style.backgroundImage = 'url(back'+i+'.jpg)';
}

**PHP_INNER** · Mar 10, 2007 06:01

I cant do on the server side because my site is a phpbb forum, and the templates can only be maneged with CSS and Html.

www.1001noites.pt.vu

I'll try it, Thanks!

**PHP_INNER** · Mar 10, 2007 08:00

Originally Posted by Raffles

What server-side language are you using? Do it with that. I suppose this would be a way to do it with javascript, but again, this would be best done on the server side.

Code:

window.onload = function() {
  var date = new Date();
  var hour = date.getHours();
  var i; 
  if (hour <= 8) i = 1;
  else if (hour <= 13) i = 2;
  else if (hour <= 19) i = 3;
  else if (hour <= 23) i = 4;
  else i = 1;
  body.style.backgroundImage = 'url(back'+i+'.jpg)';
}

I tried to do it on my computer in FrontPage, but its not working.
no error messages, and no reaction from the script.

I tried to put it in the header and body.

Like this:

PHP Code:


<head>
<meta http-equiv="Content-Language" content="pt">


</head>
<body>
<p>hgfhgfhfhgfhfg</p>
<script language="Javascript" type="text/javascript">
<!--

window.onload = function() {
  var date = new Date();
  var hour = date.getHours();
  var i; 
  if (hour <= 8) i = 1;
  else if (hour <= 13) i = 2;
  else if (hour <= 19) i = 3;
  else if (hour <= 23) i = 4;
  else i = 1;
  body.style.backgroundImage = 'url(back'+i+'.jpg)';
}
//-->
</script>

</body>

PHP Code:


<head>
<meta http-equiv="Content-Language" content="pt">

<script language="Javascript" type="text/javascript">
<!--

window.onload = function() {
  var date = new Date();
  var hour = date.getHours();
  var i; 
  if (hour <= 8) i = 1;
  else if (hour <= 13) i = 2;
  else if (hour <= 19) i = 3;
  else if (hour <= 23) i = 4;
  else i = 1;
  body.style.backgroundImage = 'url(back'+i+'.jpg)';
}
//-->
</script>
</head>
<body>
<p>hgfhgfhfhgfhfg</p>


</body>

The image files exist in the same folder as the script.

**Raffles** · Mar 10, 2007 09:17

It must go in the header. And I made a mistake. It should be document.body.style.backgroundImage:

HTML Code:

<head>
<meta http-equiv="Content-Language" content="pt">

<script type="text/javascript">
window.onload = function() {
  var date = new Date();
  var hour = date.getHours();
  var i;
  if (hour <= 8) i = 1;
  else if (hour <= 13) i = 2;
  else if (hour <= 19) i = 3;
  else if (hour <= 23) i = 4;
  else i = 1;
  document.body.style.backgroundImage = 'url(back'+i+'.jpg)';
}
</script>
</head>
<body>
<p>hgfhgfhfhgfhfg</p>


</body>

**PHP_INNER** · Mar 10, 2007 09:31

It works!!!

Thanks!!!

User Tag List

Thread: JavaScript PLUS CSS

Thread Tools

Display

JavaScript PLUS CSS

image change

Bookmarks

Bookmarks

Posting Permissions