get new image to load in table background when page is loaded

change table background, not a cell background

[dollbaby78]

I wanted to know if there is a way (using javascript?) to randomly get a different image to load in the background of a table (and NOT in a table cell)?

i.e. randomly get <table background="image1.jpg"> OR <table background="image2.jpg"> when the page loads.

I tried doing this several different ways, including:

imgswap = new Array('<table border="0" cellpadding="0" cellspacing="0" width="700" height="256" background="DNAmanBLANK.jpg">','<table border="0" cellpadding="0" cellspacing="0" width="700" height="256" background="DNAwomanBLANK.jpg">');

rnd.today=new Date();
rnd.seed=rnd.today.getTime();

function rnd() {
rnd.seed = (rnd.seed*9301+49297) % 233280;
return rnd.seed/(233280.0);
};

function rand(number) {
return Math.ceil(rnd()*number);
};

and then in the body of the page:

<script language="JavaScript">
document.write(imgswap[rand(imgswap.length)-1])
</script>

<tr >
<td height="8" width="231"></td>
....... //rest of code
</table>

BUT this only results in no table being displayed. (I know JS works on the page as the other functions work fine). Is there a way to do what I want?

PLEASE HELP! I'm new to JavaScript and trying to learn but I can't find anything but onMouseOver-like functions and that's NOT what I want.

Thanks in advance!

[DrDoc]

Welcome to Webmaster World!

I'm afraid you have two choices:
1) You can use JavaScript to write the whole table (only the <table> tag is not going to work)
2) You can use a server side solution, such as PHP

[IanKelley]

In terms of usability you really only have one choice... PHP or another server side language. If you use javascript then you're alienating people with javascript turned off (there are enough of them to matter).

You've got your entire table relying on javascript being turned on to even show up.

If you do decide to go with javascript, hard code the table and use image replace style javascript (similar to a mouseover). Your randomimzer could be simplified as well:

rNum = Math.floor(Math.random() * x)

Where X is the number of whole number options you want.

Added: To clarify... By (similar to a mouseover) I mean use the DOM to display the background image instead of writing in the actual HTML with javascript.

But either way you should be using server side scripting :-)

[BjarneDM]

I've solved this problem myself - but as a variable image to a whole page.
The problems are simliar so the way to go is:
1) assign an id to the table
2) create an array containing the images
3) generate a random number
4) use javascript to manipulate the DOM
5) put the script *after* the </table> tag

my solution looks like this:
function pigeBillede ( navn , farve , tekst , xPlacering , yPlacering )
{
this.navn = navn ;
this.farve = farve ;
this.tekst = tekst ;
this.xPlacering = xPlacering ;
this.yPlacering = yPlacering ;
}

var baggrundsBilleder = new Array () ;

baggrundsBilleder[baggrundsBilleder.length] = new pigeBillede ("Alihahd-orakel.jpg","#000000","#0000ff","top","center") ;
baggrundsBilleder[baggrundsBilleder.length] = new pigeBillede ("Alihahd-Sam.jpg","#000000","#ffffff","bottom","center") ;
baggrundsBilleder[baggrundsBilleder.length] = new pigeBillede ("Alihahd-Sam2.jpg","#000000","#ffffff","bottom","center") ;

. . . etc for as many pictures as you want

var baggrund = Math.floor(Math.random()*baggrundsBilleder.length) ;
var test = document.getElementById('siden').style.color = baggrundsBilleder[baggrund].tekst ;
test = document.getElementById('siden').style.background = " no-repeat url(/Pigerne/baggrunde/"+baggrundsBilleder[baggrund].navn+") "+baggrundsBilleder[baggrund].farve+" "+baggrundsBilleder[baggrund].xPlacering+" "+baggrundsBilleder[baggrund].yPlacering ;

your milage may vary, and as you can see I also manipulate the colours of the page and text as well as I can set the position of the image.
I hope you can get my drift despite the danish variable names