473,225 Members | 1,306 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,225 software developers and data experts.

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 44269
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

10
by: TheKeith | last post by:
I don't know much about javascript, so take it easy on me. Is there a way to dynamically change a CSS layers dimensions on the fly. Here is what I'm doing. I have a bunch of thumbnails that when...
2
by: Markus Mohr | last post by:
Hi, everyone, I have a special problem: For every monitor resolution in 200 pixel steps from 800 to 1600 pixels I have an image to be shown as centered background-image. Those images all...
1
by: Spike | last post by:
Hello! Im going to make a javascript for changing alot of images. But im not sure how to do it., where to start.. Ok, first.. this is the isue. I have 3 images(I call them 1a-3a). when u...
1
by: Martin Nadoll | last post by:
Hello, is it possible to change the bg-Image of a <td>-tag onMouseOver? maybe with javaScript or with css? Thzankis for any help, Martin Nadoll
7
by: Keith Smith | last post by:
How can I change the background IMAGE (not just color) of a CELL in a table? I know that I can do this using CSS, but I really need to be able to do it using JavaScript. Anyone know how? Must...
2
by: Mark | last post by:
IE creates an object of every ID'd HTML tag (so it appears), and each object sets a property for any parameter I set in the tag. For example, my HTML might be: <td id='cell1'...
3
by: vj | last post by:
how to change images based on action. Even clicking changed images should do respective actions. and while displaying only one image at a time sholud get displayed. I am using three images for a...
5
by: studentofknowledge | last post by:
hi guys im new to javascript and need some guidence please.. im trying to display a 400x400 pixel coloured area in the middle of a webpage that stays in the middle with a browser window resize....
2
by: Jim | last post by:
How can I use JavaScript to change a background image in a table cell? Here's the code for the cell <td width="338" valign="top" background="../images/ LEC_Q1.jpg"><div...
1
isladogs
by: isladogs | last post by:
The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...
0
by: VivesProcSPL | last post by:
Obviously, one of the original purposes of SQL is to make data query processing easy. The language uses many English-like terms and syntax in an effort to make it easy to learn, particularly for...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
0
by: mar23 | last post by:
Here's the situation. I have a form called frmDiceInventory with subform called subfrmDice. The subform's control source is linked to a query called qryDiceInventory. I've been trying to pick up the...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
2
by: jimatqsi | last post by:
The boss wants the word "CONFIDENTIAL" overlaying certain reports. He wants it large, slanted across the page, on every page, very light gray, outlined letters, not block letters. I thought Word Art...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.