Arrays - HTML Forums

compy95 · 11-01-2009, 08:47 PM

I'm building a website and I have a script to load a random image on every click. However, I have thus far manually entered the image source of every picture into the javascript array, and this is a very tedious task. Is there any way to consolidate this or make it less time consuming? Here's the code:

Code:

var rand1 = 0;
var useRand = 0;

images = new Array;
images[1] = new Image();
images[1].src = "Demotes/theyseemerollin.jpg";
images[2] = new Image();
images[2].src = "Demotes/emo.jpg";
images[3] = new Image();
images[3].src = "Demotes/fail.jpg";
images[4] = new Image();
images[4].src = "Demotes/gothopotamus.jpg";
images[5] = new Image();
images[5].src = "Demotes/japan.jpg";
images[6] = new Image();
images[6].src = "Demotes/bravery.jpg";
images[7] = new Image();
images[7].src = "Demotes/demotivationalposters.png";
images[8] = new Image();
images[8].src = "Demotes/epicfailure.gif";
images[9] = new Image();
images[9].src = "Demotes/halt.jpg";
images[10] = new Image();
images[10].src = "Demotes/herpes.jpg";
images[11] = new Image();
images[11].src = "Demotes/him.jpg";
images[12] = new Image();
images[12].src = "Demotes/mexicans.jpg";
images[13] = new Image();
images[13].src = "Demotes/myspace.jpg";
images[14] = new Image();
images[14].src = "Demotes/procrastination.jpg";
images[15] = new Image();
images[15].src = "Demotes/rockbottom.jpg";
images[16] = new Image();
images[16].src = "Demotes/ronaldmcdonald.jpg";
images[17] = new Image();
images[17].src = "Demotes/tact.jpg";
images[18] = new Image();
images[18].src = "Demotes/thecops.jpg";
images[19] = new Image();
images[19].src = "Demotes/4x4.jpg";
images[20] = new Image();
images[20].src = "Demotes/advancenotice.jpg";
images[21] = new Image();
images[21].src = "Demotes/blowingupcars.jpg";
images[22] = new Image();
images[22].src = "Demotes/ebay.jpg";
images[23] = new Image();
images[23].src = "Demotes/fatemo.jpg";
images[24] = new Image();
images[24].src = "Demotes/imminentfail.jpg";
images[25] = new Image();
images[25].src = "Demotes/irony.jpg";
images[26] = new Image();
images[26].src = "Demotes/momsminivan.jpg";
images[27] = new Image();
images[27].src = "Demotes/naturalselection.jpg";
images[28] = new Image();
images[28].src = "Demotes/ninjas.jpg";
images[29] = new Image();
images[29].src = "Demotes/ninjas2.jpg";
images[30] = new Image();
images[30].src = "Demotes/opinions.jpg";
images[31] = new Image();
images[31].src = "Demotes/paperchildren.jpg";
images[32] = new Image();
images[32].src = "Demotes/pics.jpg";
images[33] = new Image();
images[33].src = "Demotes/procrastination2.jpg";
images[34] = new Image();
images[34].src = "Demotes/redundancy.jpg";
images[35] = new Image();
images[35].src = "Demotes/screwyouguys.jpg";
images[36] = new Image();
images[36].src = "Demotes/****happens.jpg";
images[37] = new Image();
images[37].src = "Demotes/theyseemerollin2.jpg";
images[38] = new Image();
images[38].src = "Demotes/unexplainable.jpg";
images[39] = new Image();
images[39].src = "Demotes/neighborhoodpeerpressure.jpg";
images[40] = new Image();
images[40].src = "Demotes/unique.jpg";
images[41] = new Image();
images[41].src = "Demotes/unemployment.jpg";
images[42] = new Image();
images[42].src = "Demotes/simplicity.jpg";
images[43] = new Image();
images[43].src = "Demotes/facerecognition.jpg";
images[44] = new Image();
images[44].src = "Demotes/politics.jpg";
images[45] = new Image();
images[45].src = "Demotes/ninjas3.jpg";
images[46] = new Image();
images[46].src = "Demotes/hydration.jpg";
images[47] = new Image();
images[47].src = "Demotes/homeless.jpg";
images[48] = new Image();
images[48].src = "Demotes/fatherhood.jpg";
images[49] = new Image();
images[49].src = "Demotes/exercise.jpg";
images[50] = new Image();
images[50].src = "Demotes/ethug.jpg";
images[51] = new Image();
images[51].src = "Demotes/envy.jpg";
images[52] = new Image();
images[52].src = "Demotes/endings.jpg";
images[53] = new Image();
images[53].src = "Demotes/elephants.jpg";
images[54] = new Image();
images[54].src = "Demotes/chances.jpg";
images[55] = new Image();
images[55].src = "Demotes/capslock.jpg";
images[56] = new Image();
images[56].src = "Demotes/badluck.jpg";
images[57] = new Image();
images[57].src = "Demotes/motivation.jpg";
images[58] = new Image();
images[58].src = "Demotes/ninjas9.jpg";
images[59] = new Image();
images[59].src = "Demotes/ninjafail.jpg";
images[60] = new Image();
images[60].src = "Demotes/life.jpg";
images[61] = new Image();
images[61].src = "Demotes/ninjarepellant.jpg";
images[62] = new Image();
images[62].src = "Demotes/theninjaparade.jpg";
images[63] = new Image();
images[63].src = "Demotes/ninjawannabes.jpg";
images[64] = new Image();
images[64].src = "Demotes/ninjas8.jpg";
images[65] = new Image();
images[65].src = "Demotes/ninjas7.jpeg";
images[66] = new Image();
images[66].src = "Demotes/ninjas6.jpg";
images[67] = new Image();
images[67].src = "Demotes/ninjas5.jpg";
images[68] = new Image();
images[68].src = "Demotes/ninjas4.jpg";
images[69] = new Image();
images[69].src = "Demotes/ninja.jpg";



function swapPic() {
var imgnum = images.length - 1;
do {
var randnum = Math.random();
rand1 = Math.round((imgnum - 1) * randnum) + 1;
} while (rand1 == useRand);
useRand = rand1;
document.randimg.src = images[useRand].src;
}
//  End -->
</script>

Thanks for any help!

compy95 · 11-01-2009, 08:49 PM

Here's the HTML code for the image, forgot to add it:

HTML Code:

<a href="#" onClick="swapPic();"><img name="randimg" src="Demotes/momsminivan.jpg"  width="401" height="303" border="0" alt="">

RysChwith · 11-02-2009, 07:54 AM

You can make it a little more concise:

Code:

var urls = [ "Demotes/theyseemerollin.jpg",
              "Demotes/emo.jpg",
              "Demotes/fail.jpg" ];
var images = new Array();

for( var i = 0; i < urls.length; i++ ) {
    images[ i ] = new image();
    images.src = urls[ i ];
}

The only way around having to enter all the URLs, though, would be to use ASP or PHP to scan through the directory.

Rys

compy95 · 11-02-2009, 01:31 PM

Will that load the images randomly, or will that result in a specific order?

cmetz1977 · 11-02-2009, 03:05 PM

If you use PHP's readdir function, the array will be in alphabetical order by each image's file name. However, that shouldn't matter as your swapPic function returns a random image.

RysChwith · 11-03-2009, 07:51 AM

To clarify, you'd be using a mix of JavaScript and PHP (or ASP). The server-side language generates the array specifically; the rest is handled by JavaScript is already discussed.

Rys