468,537 Members | 1,977 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,537 developers. It's quick & easy.

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
Jul 20 '05 #1
4 43758
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
Jul 20 '05 #2
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/
Jul 20 '05 #3
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.
Jul 20 '05 #4
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" <Ri*****@litotes.demon.co.uk> wrote in message news:<cd*******************@news.demon.co.uk>...
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.

Jul 20 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

10 posts views Thread by TheKeith | last post: by
1 post views Thread by Spike | last post: by
1 post views Thread by Martin Nadoll | last post: by
7 posts views Thread by Keith Smith | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.