Improve company productivity with a Business Account.Sign Up

x
?
Solved

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

Posted on 2009-07-16
8
Medium Priority
?
294 Views
Last Modified: 2012-05-07
Hi, I have the script below which works fine but I need to put it on the same page several times and have each script load separate images.   What do I need to alter on each script to make several of them work on each page.  Please be as clear as possible, thanks.
<script type="text/javascript">
//The array which is going to hold the image information. Store the image info along with their correct path; I've omitted the path here as I've stored the images in the same folder where my web page resides.
var imageArray = new Array();
 
imageArray[0] = Array("images/HomeSlides/image1.jpg", "link1.html");
imageArray[1] = Array("images/HomeSlides/image2.jpg", "link2.html");
imageArray[2] = Array("images/HomeSlides/image3.jpg", "link3.html");
imageArray[3] = Array("images/HomeSlides/image4.jpg", "link4.html");
imageArray[4] = Array("images/HomeSlides/image5.jpg", "link5.html");
imageArray[5] = Array("images/HomeSlides/image6.jpg", "link6.html");
imageArray[6] = Array("images/HomeSlides/image7.jpg", "link7.html");
function doIt()
{
var rand = Math.floor(Math.random()*7); //Generating a random number between 0 and 3 here in your case you can replace 4 with 11 if you have 10 images
 
var imgPath = "<a href='"+imageArray[rand][1]+"'><img src='"+imageArray[rand][0]+"' alt='' border='0' align='absmiddle' /></a>";
 
document.getElementById("image").innerHTML = imgPath;
 
}
</script>

Open in new window

0
Comment
Question by:Webman04
  • 4
  • 4
8 Comments
 
LVL 16

Expert Comment

by:s8web
ID: 24873941
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>

Open in new window

0
 

Author Comment

by:Webman04
ID: 24874508
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>

Open in new window

0
 
LVL 16

Expert Comment

by:s8web
ID: 24877827
Yes, that should do it ;)
0
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 

Author Comment

by:Webman04
ID: 24879784
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!!!!
0
 
LVL 16

Accepted Solution

by:
s8web earned 2000 total points
ID: 24880083
you need to change your rand call in the var imgPath# declaration to match the var rand# declaration above it.  Also, I noticed that I left off a change to the imageArray[rand][0] part of it.  I corrected it in the code attached (I hope).  I am going to do some research and see if I can simplify this in a little while.  I will let you know what I find.  Each of the #'s below represent the numbers of each array.

var rand# = ...

var imgPath# = "<a href='"+imageArray#[rand#][1]+"'><img src='"+imageArray#[rand#][0]+"' alt='' border='0' align='absmiddle' /></a>";
<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[rand0][1]+"'><img src='"+imageArray0[rand0][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[rand1][1]+"'><img src='"+imageArray1[rand1][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[rand2][1]+"'><img src='"+imageArray2[rand2][0]+"' alt='' border='0' align='absmiddle' /></a>";
 
document.getElementById("image").innerHTML = imgPath2;
}
</script>

Open in new window

0
 
LVL 16

Expert Comment

by:s8web
ID: 24880230
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>";
0
 

Author Closing Comment

by:Webman04
ID: 31604427
Thanks very much, this works great.
0
 

Author Comment

by:Webman04
ID: 24880357
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
0

Featured Post

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

608 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question