Put several JavaScript Arrays on the same page so they each show a different image on load

The simplest solution I can suggest is to change each var and function name to something unique. (i.e. - add a number representing each instance of the script)

var imageArray = new Array ()
imageArray[0]
imageArray[1]
function doIt()
var imgPath = "<a href='"+imageArray[rand][1]+"'><img src='"+imageArray[rand][0]+"' alt='' border='0' align='absmiddle' /></a>";
document.getElementById("image").innerHTML = imgPath;

---- becomes ----

var imageArray0 = new Array();
imageArray0[0] = ...;
imageArray0[1] = ...;
function doIt0()
var rand0 = Math.floor(Math.random()*7);
var imgPath0 = "<a href='"+imageArray0[rand0][1]+"'><img src='"+imageArray[rand0][0]+"' alt='' border='0' align='absmiddle' /></a>";
document.getElementById("image").innerHTML = imgPath0;

var imageArray1 = new Array();
imageArray1[0] = ...;
imageArray1[1] = ...;
function doIt1()
var rand 1= Math.floor(Math.random()*7);
var imgPath1 = "<a href='"+imageArray1[rand1][1]+"'><img src='"+imageArray[rand1][0]+"' alt='' border='0' align='absmiddle' /></a>";
document.getElementById("image").innerHTML = imgPath1;

etc....

You did not  include how the script is called so I hope the attached code description above is enough.  Don't forget to change each script call for each image array.

<script type="text/javascript">
var imageArray0 = new Array();
imageArray0[0] = Array("images/HomeSlides/image01.jpg", "link01.html");
imageArray0[1] = Array("images/HomeSlides/image02.jpg", "link02.html");
imageArray0[2] = Array("images/HomeSlides/image03.jpg", "link03.html");
imageArray0[3] = Array("images/HomeSlides/image04.jpg", "link04.html");
imageArray0[4] = Array("images/HomeSlides/image05.jpg", "link05.html");
imageArray0[5] = Array("images/HomeSlides/image06.jpg", "link06.html");
imageArray0[6] = Array("images/HomeSlides/image07.jpg", "link07.html");
 
var imageArray1 = new Array();
imageArray1[0] = Array("images/HomeSlides/image11.jpg", "link11.html");
imageArray1[1] = Array("images/HomeSlides/image12.jpg", "link12.html");
imageArray1[2] = Array("images/HomeSlides/image13.jpg", "link13.html");
imageArray1[3] = Array("images/HomeSlides/image14.jpg", "link14.html");
imageArray1[4] = Array("images/HomeSlides/image15.jpg", "link15.html");
imageArray1[5] = Array("images/HomeSlides/image16.jpg", "link16.html");
imageArray1[6] = Array("images/HomeSlides/image17.jpg", "link17.html");
 
var imageArray2 = new Array();
imageArray2[0] = Array("images/HomeSlides/image21.jpg", "link21.html");
imageArray2[1] = Array("images/HomeSlides/image22.jpg", "link22.html");
imageArray2[2] = Array("images/HomeSlides/image23.jpg", "link23.html");
imageArray2[3] = Array("images/HomeSlides/image24.jpg", "link24.html");
imageArray2[4] = Array("images/HomeSlides/image25.jpg", "link25.html");
imageArray2[5] = Array("images/HomeSlides/image26.jpg", "link26.html");
imageArray2[6] = Array("images/HomeSlides/image27.jpg", "link27.html");
 
function doIt0()
{
var rand0 = Math.floor(Math.random()*7);
 
var imgPath0 = "<a href='"+imageArray0[rand][1]+"'><img src='"+imageArray[rand][0]+"' alt='' border='0' align='absmiddle' /></a>";
 
document.getElementById("image").innerHTML = imgPath0;
}
 
function doIt1()
{
var rand1 = Math.floor(Math.random()*7);
 
var imgPath1 = "<a href='"+imageArray1[rand][1]+"'><img src='"+imageArray[rand][0]+"' alt='' border='0' align='absmiddle' /></a>";
 
document.getElementById("image").innerHTML = imgPath1;
}
 
function doIt2()
{
var rand2 = Math.floor(Math.random()*7);
 
var imgPath2 = "<a href='"+imageArray2[rand][1]+"'><img src='"+imageArray[rand][0]+"' alt='' border='0' align='absmiddle' /></a>";
 
document.getElementById("image").innerHTML = imgPath2;
}
</script>

Select allOpen in new window

Hi, thanks the script is called with the code below, so would I just change the doIt(); to doIt0();, doIt1(); and so on?

<div align="center">
            <div id="image"></div>
          <script type="text/javascript">
doIt();
    </script>

Select allOpen in new window

Yes, that should do it ;)

Hi, I installed the script and setup the first Array0 but it won't work.  Here is the link: http://72.29.5.13/defaulttest.asp 

and here is the link of the page that I had before that works, in case this helps: http://72.29.5.13/default.asp

Note that I copy pasted it but corrected the image path.  Do I have to add all of the images for each array before I can test it?  or will it work on just the first one and then I can test it?  Please take a look and let me know what I'm doing wrong.

Thanks very much for your help!!!!

Oh yeah, I forgot to tell you that you should be able to get them working one at a time as long as the code is proper. The error on the original we worked on was just "rand is not defined" because we changed the rand variable declaration to "var rand0 = " but we were still calling for "rand" when we defined "imgPath0", instead of calling for "rand0".
var imgPath0 = "<a href='"+imageArray0[rand][1]+"'><img src='"+imageArray0[rand][0]+"' alt='' border='0' align='absmiddle' /></a>";

Thanks very much, this works great.

Just so you know it works great, but I had to use several image references, one for each image, total of 5 image boxes on the page so I will use image, image1, image2... and then I can attach different style sheets if I need different size images in each.  For some reason it would not work until I did this?  Jut thought I'd let you know in case anyone else needs the same script.  Thanks very much for your amazing skills and help.

Thanks