I just added a feature to the site that randomly places the background images on the home page…instead of the same image appearing in the same spot all the time. It was something I wanted to add for a while and I’m so happy to have it.

for the technical folks, it is all done with javascript.

First, I declare each image, give it an ID (I simply increment the number for each image):

Then I wrote some javascript to create an array of images that already exist on the file system:

var BGImages = [
“images/IMG_2485.jpg”,
“images/DSC02223.jpg”,
“images/IMG_1536.jpg” ]

Finally, I wrote some Javascript to loop through the array and randomly pick an image, set it to the img tag and remove it from the array (so it won’t be used again):

BGImagesLen = BGImages.length;
var randNum;
for (i = 1; BGImages.length > 0; i++) {
randNum = Math.floor(Math.random() * BGImages.length);
document.getElementById(“BGImg” + i).src = BGImages[randNum];
BGImages.splice(randNum, 1);
}

To try it out, refresh the page and you’ll see that the images have randomly moved to a different place on the page! I’ll keep adding new pictures to the site and the site will automatically rotate them in.