Rotating Images By Percentage using Javascript

[aaronrusso]

Im trying to rotate images using javascript. These images also contain URLs. The following script rotates them randomly on refresh and does so perfectly. Is there a way to append the code to give higher priority to images using percentage? Like out of 5 images, one is shown 50% of the time on refresh, and the the rest rotate 10% equally?

<script type="text/javascript">

//store the quotations in arrays
var images = [], 
index = 0;
images[0]="<a href='URL1'><img style='border:none;' src='IMAGE1'/></a>";
images[1]="<a href='URL2'><img style='border:none;' src='IMAGE2'/></a>";
images[2]="<a href='URL3'><img style='border:none;' src='IMAGE3'/></a>";
images[3]="<a href='URL4'><img style='border:none;' src='IMAGE4'/></a>";
images[4]="<a href='URL5'><img style='border:none;' src='IMAGE5'/></a>";

index = Math.floor(Math.random() * images.length);
document.write(images[index]);
//done
</script>

Thanks

[jscheuer1]

I think you would need 6 images for that. But it's easy enough to have one image whose chance is 50% and have the others 'fight' for the slot when that one image isn't being shown:

<script type="text/javascript">

//store the quotations in arrays
var images = [], 
index = Math.floor(Math.random() * 2);
images[0]="<a href='URL1'><img style='border:none;' src='IMAGE1'/></a>";
images[1]="<a href='URL2'><img style='border:none;' src='IMAGE2'/></a>";
images[2]="<a href='URL3'><img style='border:none;' src='IMAGE3'/></a>";
images[3]="<a href='URL4'><img style='border:none;' src='IMAGE4'/></a>";
images[4]="<a href='URL5'><img style='border:none;' src='IMAGE5'/></a>";

index = index? 0 : Math.floor(Math.random() * (images.length - 1)) + 1;
document.write(images[index]);
//done
</script>

images[0] will be shown half the time, when it isn't being shown, one of the others will be randomly selected to be shown.

[aaronrusso]

Thanks for the reply! But is there a way to make it so out of 5 (or even 6) have different percentages? For example, "image[0]" would display 50% of the time on refresh, "image[1]" would display 30% of the time, "image[2]" would display 10% of the time, "image[3]" would display 5% of the time and "image[4]" would display 5% of the time too? If all the values need to be different, its not a problem having 3 and 4 display 6-4% respectively. Just wanted to know if that was possible. Thanks!

[jscheuer1]

Just to be clearer about the code in my previous post - The image[0] one will display 50% of the time in random fashion. Of the 4 others, they will as a group display 50% of the time in random fashion. 50/4 is 12.5, so each will display 12.5% of the time. It's possible to break it down further, but the code gets more complex. A different approach might be in order:

<script type="text/javascript">
//store the images' html and percent in the images array as objects
var images = [], limit = 0, imagepointer = -1,
index = Math.floor(Math.random() * 100);
images[0] = {html: "<a href='URL1'><img style='border:none;' src='IMAGE1'/></a>", percent: 50};
images[1] = {html: "<a href='URL2'><img style='border:none;' src='IMAGE2'/></a>", percent: 30};
images[2] = {html: "<a href='URL3'><img style='border:none;' src='IMAGE3'/></a>", percent: 10};
images[3] = {html: "<a href='URL4'><img style='border:none;' src='IMAGE4'/></a>", percent: 5};
images[4] = {html: "<a href='URL5'><img style='border:none;' src='IMAGE5'/></a>", percent: 5};

while (++imagepointer < images.length){
	limit += images[imagepointer].percent;
	if(index < limit){
		document.write(images[imagepointer].html);
		break;
	}
}
//done
</script>