randomly change background image with css and javascript?

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

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/independe...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 wrote:

Nathan Given wrote:
snip
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.

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.

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 (AT) litotes (DOT) demon.co.uk> wrote

Brian wrote:
Nathan Given wrote:
snip
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.

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.