• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 377
  • Last Modified:

add image link to JavaScript array

Hi, I have posted the script below.  This works fine to show a random image but I need to know how to link each image when it's shown?  I want to allow the user to click on the image shown and be take to a url.  How to I connect a link to each image in the array?
<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] = "images/HomeSlides/image1.jpg"; //You can replace these image file names with your own image names.
imageArray[1] = "images/HomeSlides/image2.jpg";
imageArray[2] = "images/HomeSlides/image3.jpg";
imageArray[3] = "images/HomeSlides/image4.jpg";
imageArray[4] = "images/HomeSlides/image5.jpg";
imageArray[5] = "images/HomeSlides/image6.jpg";
imageArray[6] = "images/HomeSlides/image7.jpg";
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 = "<img src='"+imageArray[rand]+"' alt='' border='0' align='absmiddle' />";
 
document.getElementById("image").innerHTML = imgPath;
 
}
</script>
 
 
 
 
 <script type="text/javascript">
doIt();
    </script>

Open in new window

0
Webman04
Asked:
Webman04
1 Solution
 
PhatzerCommented:
As such I believe, give it a whirl:
<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
 
Webman04Author Commented:
Perfect, thanks very much for your fast and accurate response!!!
0
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

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now