Page 1 of 1

Javascript random images

Posted: Tue Aug 19, 2008 10:52 am
by hairytea
I have created javascript to get random images and display them to div elements on the html page.

I have the code working so far as generating random images ok.

the problem.....

i have 5 div elements....sometimes the same images is showing 2 or more times on different div areas and i want each one of the 5 div areas to display different images from the array.
function ranImage() {

images = new Array();
images[0] = "<a href = '#'><img src='../images/topAds/0.jpg' alt='' border='0'></a>";
images[1] = "<a href = '#'><img src='../images/topAds/1.jpg' alt='' border='0'></a>";
images[2] = "<a href = '.#'><img src='../images/topAds/2.jpg' alt='' border='0'></a>";
images[3] = "<a href = '#'><img src='../images/topAds/3.jpg' alt='' border='0'></a>";
images[4] = "<a href = '#'><img src='../images/topAds/4.jpg' alt='' border='0'></a>";
images[5] = "<a href = '#'><img src='../images/topAds/5.jpg' alt='' border='0'></a>";
images[6] = "<a href = '#'><img src='../images/topAds/6.jpg' alt='' border='0'></a>";
images[7] = "<a href = '#'><img src='../images/topAds/7.jpg' alt='' border='0'></a>";
images[8] = "<a href = '#'><img src='../images/topAds/8.jpg' alt='' border='0'></a>";
images[9] = "<a href = '#'><img src='../images/topAds/9.jpg' alt='' border='0'></a>";
images[10] = "<a href = '#'><img src='../images/topAds/10.jpg' alt='' border='0'></a>";


index1 = Math.floor(Math.random() * images.length);
index2 = Math.floor(Math.random() * images.length);
index3 = Math.floor(Math.random() * images.length);
index4 = Math.floor(Math.random() * images.length);
index5 = Math.floor(Math.random() * images.length);


document.getElementById('topAd1').innerHTML = images[index1];
document.getElementById('topAd2').innerHTML = images[index2];
document.getElementById('topAd3').innerHTML = images[index3];
document.getElementById('topAd4').innerHTML = images[index4];
document.getElementById('topAd5').innerHTML = images[index5];

}
any ideas?

Re: Javascript random images

Posted: Tue Aug 19, 2008 11:23 am
by onion2k
You aren't checking the numbers you generate are unique, consequently the same images can be appear. Rather than generating 5 numbers, why don't you randomise the array of images and then just output the first 5 elements?

Randomising an array: http://javascript.about.com/library/blsort2.htm

Re: Javascript random images

Posted: Wed Aug 20, 2008 5:38 am
by hairytea
Thank you,

there seems to be a floor with this code...

instead of writing random images to my div tags only once it writes EVERY single image in the array and populates my div areas with not just one image but all of them in the array and covers the whole page lol.

i will keep searching but if anyone else has any suggestions i am all ears.

i think am looking for a conditional statement that says image placeholder 1 should differ from image place holder 2 and so on and so forth... :-)

Re: Javascript random images

Posted: Wed Aug 20, 2008 6:08 am
by hairytea
I found a work around from playing with the code myself...

here goes...

i created 5 different arrays (one for each place holder) and split the images equally into each array and them called them seperatley...as follows....
function ranImage() {

images1 = new Array();
images1[0] = "<a href = '#'><img src='../images/topAds/0.jpg' alt='Alt Description Goes Here' border='0'></a>";
images1[1] = "<a href = '#'><img src='../images/topAds/1.jpg' alt='Alt Description Goes Here' border='0'></a>";
images1[2] = "<a href = '.#'><img src='../images/topAds/2.jpg' alt='Alt Description Goes Here' border='0'></a>";

images2 = new Array();
images2[0] = "<a href = '#'><img src='../images/topAds/3.jpg' alt='Alt Description Goes Here' border='0'></a>";
images2[1] = "<a href = '#'><img src='../images/topAds/4.jpg' alt='Alt Description Goes Here' border='0'></a>";

images3 = new Array();
images3[0] = "<a href = '#'><img src='../images/topAds/5.jpg' alt='Alt Description Goes Here' border='0'></a>";
images3[1] = "<a href = '#'><img src='../images/topAds/6.jpg' alt='Alt Description Goes Here' border='0'></a>";

images4 = new Array();
images4[0] = "<a href = '#'><img src='../images/topAds/7.jpg' alt='Alt Description Goes Here' border='0'></a>";
images4[1] = "<a href = '#'><img src='../images/topAds/8.jpg' alt='Alt Description Goes Here' border='0'></a>";

images5 = new Array();
images5[0] = "<a href = '#'><img src='../images/topAds/9.jpg' alt='Alt Description Goes Here' border='0'></a>";
images5[1] = "<a href = '#'><img src='../images/topAds/10.jpg' alt='Alt Description Goes Here' border='0'></a>";

index1 = Math.floor(Math.random() * images1.length);
index2 = Math.floor(Math.random() * images2.length);
index3 = Math.floor(Math.random() * images3.length);
index4 = Math.floor(Math.random() * images4.length);
index5 = Math.floor(Math.random() * images5.length);


document.getElementById('topAd1').innerHTML = images1[index1];
document.getElementById('topAd2').innerHTML = images2[index2];
document.getElementById('topAd3').innerHTML = images3[index3];
document.getElementById('topAd4').innerHTML = images4[index4];
document.getElementById('topAd5').innerHTML = images5[index5];

}
Now, when i need to add new ones just put them to the seperate arrays!

I hope this can be of help to anyone.

Regards

Andrew

Re: Javascript random images

Posted: Wed Aug 20, 2008 6:09 am
by jayshields
I guess you've changed your script to what onion2k suggested, and that it has resulted in the new problem. In that case, post your new code.

EDIT:
It would seriously be alot neater if you followed what onion2k suggested. Just put all the images into an array, randomize it, and output the first 5.

Re: Javascript random images

Posted: Wed Aug 20, 2008 7:50 am
by hairytea
jayshields wrote:I guess you've changed your script to what onion2k suggested, and that it has resulted in the new problem. In that case, post your new code.

EDIT:
It would seriously be alot neater if you followed what onion2k suggested. Just put all the images into an array, randomize it, and output the first 5.
Thank you for your comments.

But, as per my previous post, the problem is now sorted and working perfectly.

Rgds

Andrew