I have the following javascript and it works as it should, a new image is loaded each time the page is loaded.


var imagenumber = 5 ;
var randomnumber = Math.random() ;
var rand1 = Math.round( (imagenumber-1) * randomnumber) + 1 ;
var URLs = new Array() ;
images = new Array
images[1] = "images/headerpics/h1.jpg"
images[2] = "images/headerpics/h2.jpg"
images[3] = "images/headerpics/h3.jpg"
images[4] = "images/headerpics/h4.jpg"
images[5] = "images/headerpics/h5.jpg"



var image = images[rand1] ;
var linknumber = 1 ;
var img1 = Math.round( (linknumber-1) * randomnumber) + 1 ;
links = new Array
links[1] = "index.htm"

var link = links[img1];
document.write('<a href="' + link + '"><img src="' + image + '" border="0"></a>') ;

Here is the html code to call the script,

<!-- START ROTATING HEADER GRAPHICS -->

<script language="JavaScript"
type="text/JavaScript" src="javascripts/headerpics.js">
</script>

<!-- END ROTATING HEADER GRAPHICS -->

The issue is that a small space is created under the image when it loads using the javascript.

I have a table created with two rows with a menu bar in the bottom row and the images load in the top row. If I just place an image in the top row it looks fine. If I use the script to randomly load the images there is a small space under the image or between the top row and bottom row.

Any suggestions??

Thanks!

Joe