By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
443,369 Members | 1,131 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 443,369 IT Pros & Developers. It's quick & easy.

randomly change background image with css and javascript?

P: n/a
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
Share this Question
Share on Google+
4 Replies


P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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.