?

Log in

No account? Create an account

Previous Entry | Next Entry

I'm smart!

So tonight, the three imaginary girls ask me to write some code that will allow them to have a series of images rotate at random on the home page. The idea was that they usually have one picture in a spot that goes along with the main article, but this time the main article was about five bands, so they wanted the image to change every 45 seconds to a random image of one of the bands.

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>

<SCRIPT LANGUAGE = "Javascript">
var rgImages = new Array();
var currentImage = new Image();
startTheCommotion();

function startTheCommotion()
{
// Populate the array with all the possible images.
rgImages[0] = new imageItem("b0.gif", "The number zero");
rgImages[1] = new imageItem("b1.gif", "The number one");
rgImages[2] = new imageItem("b2.gif", "The number two");
rgImages[3] = new imageItem("b3.gif", "The number three");
rgImages[4] = new imageItem("b4.gif", "The number four");
rgImages[5] = new imageItem("b5.gif", "The number five");

// Stick a random image in there now
rotate();

// Stick a new random image in there on the interval
setInterval('rotate()', 5000);
}

function getRandomImage()
{
var ran_number=parseInt(Math.round(Math.random()*(rgImages.length - 1)));
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;
}

function rotate()
{
getRandomImage();
document.images['randomImage'].src = currentImage.src;
document.images['randomImage'].alt = currentImage.alt;
}

</script>


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.

Comments

( 1 comment — Leave a comment )
(Anonymous)
Jan. 29th, 2003 12:24 pm (UTC)
claim substantiated: steve is cool
yes, it is true.
steve is the coolest guy around.
thanks to him, we will be able to continually offer fresh content to those who visit the threeimaginarygirls site. such "out of the box" thinking strategies and follow through will surely be noted in his annual review. he is a true superstar that we are proud to have on the team.

kind regards,
liz, imaginary girl
( 1 comment — Leave a comment )