In an effort to make our page a little more personal and colorful I added an image rotator to our index page with pictures that I had taken around our office. There are about five million rotator scripts on the internet but I hadn't posted to the blog in a while so here is mine!
<html>
<body onLoad = "setImg();"><!-- Calls the setImg() function after the page has loaded -->
<span id="images"></span><!-- Image html will appear between these spans when the onLoad event is triggered -->
<script type="text/javascript">
//This is the array where you store the location of the pictures you would like to rotate through.
var imageArr = new Array("gfx/artofprogramming_small.jpg","gfx/thinkpad_small.jpg","gfx/theoffice_small.jpg","gfx/whiteboard_small.jpg","gfx/park_small.jpg","gfx/apple_small.jpg");
var numImages = imageArr.length;
function setImg(){
var randomNumber=Math.floor(Math.random()*numImages);//Selects a random number between 0 and the number of images in the array minus 1
document.getElementById("images").innerHTML = "<img src ='"+imageArr[randomNumber]+"' alt='rotating images from the office' />"; //Adds img html to your page between the two elements with id="images" }
</script>
</body>
</html>
