multiple random image sets in an array?

[Jtataryn]

Hey guys, I've got a good one that I've scoured the net looking for an answer to..

some background info, take a look at my test page I have setup (http://www.leftofnormal.com/testing/)

what we have there is 3 images that in total will combine into one whole image, when you click on it, it splits apart (via the awesome animated js collapse script ) its seamless and holds all the content in other divs (view my root site, if you need a better example) as it stands, the whole shebang works as it is and kinda fun to play with.

what im looking to do is to have that "single" image randomize on each page load/refresh, but here are the difficulties i'm running into;

1) the single image itself can be random, but the 'set' of images cannot (e.g. on page load you see images 1,2,3. on refresh you may see 7,8,9 on another you may see 4,5,6 so on and so forth)

2) the image sets must be able to be called from a script to integrate into the html/js

(e.g. <a href="javascript:animatedcollapse.show(['opendiv'])"><img src="www.leftofnormal.com/randombackground.php"/></a> )

I've explored some options and come to php for my answer (which unfortunately I'm not quite so versed in) and I believe it can be done with a sort of randomized multidimensional image array, but I've no idea how to call the specific images from the array thats chosen at random into each spot thats necessary.

So, PHP guru's, is this actually possible?

gimme some leads to chase! thanks!

[bluewalrus]

Seems like something like

<?php
$holder[0] = '<a href="javascript:animatedcollapse.show([\'headdiv\'])"><img src="test1.jpg" width="1200" height="200" border="0" style="border-style: none" /></a><a href="javascript:animatedcollapse.show([\'headdiv\'])"><img src="test2.jpg" width="1200" height="200" border="0" style="border-style: none" /></a><a href="javascript:animatedcollapse.show([\'headd\'])"><img src="test3.jpg" width="1200" height="200" border="0" style="border-style: none" /></a>';
$holder[1] = '<a href="javascript:animatedcollapse.show([\'headdiv\'])"><img src="test4.jpg" width="1200" height="200" border="0" style="border-style: none" /></a><a href="javascript:animatedcollapse.show([\'headdiv\'])"><img src="test5.jpg" width="1200" height="200" border="0" style="border-style: none" /></a><a href="javascript:animatedcollapse.show([\'headdiv\'])"><img src="test6.jpg" width="1200" height="200" border="0" style="border-style: none" /></a>';
$holder[2] = '<a href="javascript:animatedcollapse.show([\'headdiv\'])"><img src="test7.jpg" width="1200" height="200" border="0" style="border-style: none" /></a><a href="javascript:animatedcollapse.show([\'headdiv\'])"><img src="test8.jpg" width="1200" height="200" border="0" style="border-style: none" /></a><a href="javascript:animatedcollapse.show([\'headdiv\'])"><img src="test9.jpg" width="1200" height="200" border="0" style="border-style: none" /></a>';
shuffle($holder);
echo $holder[0];
?>

could do it. The shuffle randomizes the order of the arrays then the echo outputs the first array which won't be the same because of the shuffle. This is a simplified version, not that good with the js.

[Jtataryn]

Yes! thats the effect im looking for completely! I certainly was overcomplicating things, haha.

I considered shuffling, but I didn't realize you can call multiple images off of one variable.
thanks for pointing me in a proper direction!