Stylesheets - randomly change background image with css and javascript?

Author

randomly change background image with css and javascript?

Nathan Given

2004-07-22, 7:18 pm

Hello All,

I am trying to randomly change the background image of my home page
but I can't seem to figure it out.

Here is a snippet of my css

....
BODY {background:transparent url(../images/homepagebg3.jpg) no-repeat;
font:normal 90% Arial, Helvetica, sans-serif; color:#263158;}
....

Here is my javascript that I am trying to use to change my background
image....

<link type="text/css" href="css/main.css" media="screen"
rel="stylesheet" />
<link type="text/css" href="css/imagetitles.css" media="screen"
rel="stylesheet" />
<script language="javascript" type="text/javascript">

images = new Array(3);
images[0] = 'background:transparent url(../images/homepagebg3.jpg)
no-repeat; font:normal 90% Arial, Helvetica, sans-serif;
color:#263158;';
images[1] = 'background:transparent url(../images/homepagebg1.jpg)
no-repeat; font:normal 90% Arial, Helvetica, sans-serif;
color:#263158;';
images[2] = 'background:transparent url(../images/homepagebg2.jpg)
no-repeat; font:normal 90% Arial, Helvetica, sans-serif;
color:#263158;';

index = Math.floor(Math.random() * images.length);

document.getElementsByTagName("BODY")[0].style.background =
images[index];

</script>

Here is the error from the firefox javascript console:
Error: document.getElementsByTagName("BODY")[0] has no properties.

Any ideas? How can I randomly change my background image?

Thanks!
--
Nathan

Roderik

2004-07-23, 12:16 pm

Nathan Given wrote:
> Hello All,
>
> I am trying to randomly change the background image of my home page
> but I can't seem to figure it out.
>
> Here is a snippet of my css
>
> ...
> BODY {background:transparent url(../images/homepagebg3.jpg) no-repeat;
> font:normal 90% Arial, Helvetica, sans-serif; color:#263158;}
> ...
>
> Here is my javascript that I am trying to use to change my background
> image....
>
>
> <link type="text/css" href="css/main.css" media="screen"
> rel="stylesheet" />
> <link type="text/css" href="css/imagetitles.css" media="screen"
> rel="stylesheet" />
> <script language="javascript" type="text/javascript">
>
> images = new Array(3);
> images[0] = 'background:transparent url(../images/homepagebg3.jpg)
> no-repeat; font:normal 90% Arial, Helvetica, sans-serif;
> color:#263158;';
> images[1] = 'background:transparent url(../images/homepagebg1.jpg)
> no-repeat; font:normal 90% Arial, Helvetica, sans-serif;
> color:#263158;';
> images[2] = 'background:transparent url(../images/homepagebg2.jpg)
> no-repeat; font:normal 90% Arial, Helvetica, sans-serif;
> color:#263158;';
>
> index = Math.floor(Math.random() * images.length);
>
>
> document.getElementsByTagName("BODY")[0].style.background =
> images[index];
>
>
> </script>
>
>
> Here is the error from the firefox javascript console:
> Error: document.getElementsByTagName("BODY")[0] has no properties.
>
> Any ideas? How can I randomly change my background image?
>
> Thanks!
> --
> Nathan

You can't assign this in the CSS way since it is javascript and not CSS.
In this document there appears to be no javascript property for this
(don't know if they are right):
http://www.comptechdoc.org/independ.../javastyle.html
A way to achieve this is to make two classes in CSS and assign a new
class to the object.
You can see how you can assign a class using javascript in my tabular
navigation example at: http://www.top100nederland.net/test/tabjes.htm

regards,

Roderik

--
http://www.archytas.nl/
webdesign, internet applicaties, internetgestuurde elektronica

Brian

2004-07-23, 7:17 pm

Nathan Given wrote:

> Here is my javascript that I am trying to use to change my background
> image....
>
> images = new Array(3);
[snip]
> </script>
>
> Here is the error from the firefox javascript console:
> Error: document.getElementsByTagName("BODY")[0] has no properties.

If you have a JavaScript question, ask in a JavaScript group. I
recommend comp.lang.javascript.

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/

Richard Cornford

2004-07-24, 7:16 pm

Brian wrote:
> Nathan Given wrote:
<snip>
>
> If you have a JavaScript question, ask in a JavaScript
> group. I recommend comp.lang.javascript.

Fair enough, but the explanation of the error is fairly simple. A script
executed inline within the HEAD section of a page executes prior to the
HTML parser encountering (or implying) the opening BODY tag. As a result
there is no BODY element within the DOM to refer to and -
document.getElementsByTagName("BODY") - must return an empty nodeList at
that point (so there is no item at index zero within that nodeList).

Richard.

Nathan Given

2004-07-26, 11:16 pm

Thank you all.

It turns out two problems:

First, Richard was right.

Second, I had the wrong path to my images. Wow, I'm dumb.

THanks for all your help!
--
Nathan

"Richard Cornford" <Richard@litotes.demon.co.uk> wrote in message news:<cdtu4h$870$1$8300dec7@news.demon.co.uk>...
> Brian wrote:
> <snip>
>
> Fair enough, but the explanation of the error is fairly simple. A script
> executed inline within the HEAD section of a page executes prior to the
> HTML parser encountering (or implying) the opening BODY tag. As a result
> there is no BODY element within the DOM to refer to and -
> document.getElementsByTagName("BODY") - must return an empty nodeList at
> that point (so there is no item at index zero within that nodeList).
>
> Richard.