At first, I didn't really see how I could do it. I figured at very least, I could make it so that every time you loaded the page, it could choose one of them at random, but it didn't occur to me that I could have it change out automatically on an interval.
But, I thought it over in the grocery store and decided I could probably come up with something. Then I came home and wrote this:
<p><img src="b0.gif" alt="zero" name="randomImage" width="13" height="16"></p>
var rgImages = new Array();
var currentImage = new Image();
// Populate the array with all the possible images.
rgImages = new imageItem("b0.gif", "The number zero");
rgImages = new imageItem("b1.gif", "The number one");
rgImages = new imageItem("b2.gif", "The number two");
rgImages = new imageItem("b3.gif", "The number three");
rgImages = new imageItem("b4.gif", "The number four");
rgImages = new imageItem("b5.gif", "The number five");
// Stick a random image in there now
// Stick a new random image in there on the interval
currentImage.src = rgImages[ran_number].url;
currentImage.alt = rgImages[ran_number].alt;
// This function is just so I can have a multidimensional array.
function imageItem(url, alt)
this.url = url;
this.alt = alt;
document.images['randomImage'].src = currentImage.src;
document.images['randomImage'].alt = currentImage.alt;
The result is that the page loads with a default image, which changes right away, and then every five seconds changes to one of the others (randomly chosen). You can see it in action here.
It seems pretty insignificant, but I'm kinda proud of this little bit of code, because it's a neat little function and it's something I never thought of doing before. And I liked standing up to the challenge.
Yes. I'm a nerd.