Javascript and random rotation -

Take pity on a newbie:

I want to have one of 4 banners randomly displayed when the page loads. So first I did this:

<script type="text/javascript">
function show_banner() {
var width = "468"; // Width of Advertisements
var height = "60"; // Height of Advertisements
var target = "_blank"; // Target window to open the ads

var ad = new Array()
// Write down the source urls of ad images
ad[0]='http://www.betterloveandsex.com/banners/contractsandforms1.gif';
ad[1]='http://www.betterloveandsex.com/banners/creditrepairdirect1.gif;
ad[2]='http://www.betterloveandsex.com/banners/lingerie-mart1.gif';
ad[3]='http://www.betterloveandsex.com/onlinevideoshere_468x60.gif';

var links = new Array()
//Write link to ads respectively
links[0]='link0';
links[1]='link1';
links[2]='link2';
links[3]='link3';

var s = Math.floor(Math.random()*ad.length);
document.write('<td align="right"><a href="'+links+'"><img src="'+ad+'" width="'+width+'" height="'+height+'" border="0" alt="'+links+'"></a></td>');
}
// ]]>
</script>

Then later in a table I do this:
<table width="100%" cellspacing="0">
<tr><td>
<a href="http://www.mysite.com"><img src="http://www.mysite.com/styles/subsilver2/imageset/site_logo.gif" align="left" width="300" height="94"/></a></td>

<td align="center"><h1>{SITENAME}</h1><span class="gen">{SITE_DESCRIPTION}</span></td>

<td align="right"><a href="javascript:show_banner()"></a></td>

</tr>
</table>

Which of course does not work, probably because the page is rendered before I call the function. How should I do this?

Thanks.

 

You were calling to the function wrongly, here you are:

<script type="text/javascript">
function show_banner() {
var width = "468"; // Width of Advertisements
var height = "60"; // Height of Advertisements
var target = "_blank"; // Target window to open the ads

var ad = new Array()
// Write down the source urls of ad images
ad[0]='0.JPG';
ad[1]='1.JPG';
ad[2]='2.JPG';
ad[3]='3.JPG';

var links = new Array()
//Write link to ads respectively
links[0]='http://www.google.com?testNumber=0';
links[1]='http://www.google.com?testNumber=1';
links[2]='http://www.google.com?testNumber=2';
links[3]='http://www.google.com?testNumber=3';

var s = Math.floor(Math.random()*ad.length);
document.write('<a href="'+links[s]+'"><img src="'+ad[s]+'" width="'+width+'" height="'+height+'" border="0" alt="'+links[s]+'"></a>');
}
// ]]>
</script>

<table width="100%" cellspacing="0">
<tr><td>
<a href="http://www.mysite.com"><img src="http://www.mysite.com/styles/subsilver2/imageset/site_logo.gif" align="left" width="300" height="94"/></a></td>

<td align="center"><h1>{SITENAME}</h1><span class="gen">{SITE_DESCRIPTION}</span></td>

<td align="right"><script>show_banner()</script></td>

</tr>
</table>

Code (markup):

 

Thanks. I changed it, but still getting nothing. Is my document.write done correctly?

 

Use mine, just change the pictures and links...

Tell me if it works