While loop in JavaScript

I have the following JavaScript to get a random image from a list of available images:

<script type="text/javascript">// <![CDATA[
var image = new Array();
var link  = new Array();

image[0] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus01_small.png';
image[1] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus02_small.png';
image[2] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus03_small.png';
image[3] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus04_small.png';
image[4] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus05_small.png';
image[5] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus06_small.png';
image[6] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus07_small.png';
image[7] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus08_small.png';
image[8] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus09_small.png';
image[9] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus10_small.png';
image[10] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus11_small.png';
image[11] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus12_small.png';
image[12] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus13_small.png';
image[13] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus14_small.png';
image[14] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus15_small.png';
image[15] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus16_small.png';
image[16] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus17_small.png';
image[17] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus18_small.png';
image[18] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus19_small.png';
image[19] = 'http://www.ovlu.li/ornitholog/cms/im开发者_JAVA技巧ages/gallery/schwalbenhaus/schwalbenhaus20_small.png';
image[20] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus21_small.png';
image[21] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus22_small.png';
image[22] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus23_small.png';
image[23] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus24_small.png';
image[24] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus26_small.png';
image[25] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus27_small.png';
image[26] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus28_small.png';
image[27] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus29_small.png';

link[1] = 'http://www.ovlu.li/ornitholog/cms/index.php?page=bildergalerie';

var num = Math.random();
var ran = Math.floor((image.length - 1) * num) + 1;

document.write('<a href="' + link[1] + '" mce_href="' + link[1] + '"><img src="' + image[ran] + '" mce_src="' + image[ran] + '" border="0" + width="200" /></a>');
// ]]></script>

Now I'd like to change the code so that there are three random images. I was able to do it, by just using this code three times. Unfortunately, then there is the possibility that the same images is randomly choosen multiple times. So how can I avoid that the same image is chosen multiple times? I think I have to maintain a list of selected images and then chose a new image randomly until a image that is not in the list is chosen. But how do I do this?

A simple way is to remove the picked images from the array:

for (var i = 0; i < 3; i++) {
  var index = Math.floor(image.length * Math.random());
  var picked = image.splice(index, 1)[0];
  document.write(
    '<a href="' + link[1] + '" mce_href="' + link[1] + '">' +
    '<img src="' + picked + '" mce_src="' + picked + '" border="0" + width="200" />' +
    '</a>'
  );
}

Note that I corrected the calculation of the random index. The orignal never picked the first item in the array.

I would recommend to shuffle the array with any server side technique. If you get the images from a data base you can use it's randomizing or if you use PHP you can use shuffle(). Then you just have to take the first three images.

EDIT: As you seems to use PHP on that page, try the following:

$images = array('01','02','03','04','05', ... ): // the numbers of the images
shuffle($images):

for($i=0;$i<3;$i++){
    echo "image[".$i."] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus".$images[$i]."_small.png';
}

Insert that into the script tag to only print out three lines of javascript for the array.

<script type="text/javascript">// <![CDATA[
var image = [];
var link  = [];

image[0] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus01_small.png';
image[1] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus02_small.png';
image[2] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus03_small.png';
image[3] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus04_small.png';
image[4] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus05_small.png';
image[5] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus06_small.png';
image[6] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus07_small.png';
image[7] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus08_small.png';
image[8] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus09_small.png';
image[9] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus10_small.png';
image[10] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus11_small.png';
image[11] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus12_small.png';
image[12] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus13_small.png';
image[13] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus14_small.png';
image[14] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus15_small.png';
image[15] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus16_small.png';
image[16] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus17_small.png';
image[17] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus18_small.png';
image[18] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus19_small.png';
image[19] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus20_small.png';
image[20] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus21_small.png';
image[21] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus22_small.png';
image[22] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus23_small.png';
image[23] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus24_small.png';
image[24] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus26_small.png';
image[25] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus27_small.png';
image[26] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus28_small.png';
image[27] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus29_small.png';

link[1] = 'http://www.ovlu.li/ornitholog/cms/index.php?page=bildergalerie';
function pickImage(){
   var pick = Math.floor(Math.random()*image.length);
   var img = image.splice(pick, 1);

   document.write('<a href="' + link[1] + '" mce_href="' + link[1] + '"><img src="' + img + '" mce_src="' + img + '" border="0" + width="200" /></a>');
}

pickImage();
pickImage();
//add as much pickImage(); as you want
// ]]></script>

I'd go with Guffa's answer. And I would create the array like this:

var images = [];
for(var i = 0; i < 28 ; i++){
    images[i] =
     'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus' 
       + ( i < 10 ? '0' : '')
       + '_small.png';
}