Right you are, Ken (vespa59) wrote,
Right you are, Ken
vespa59

  • Mood:
  • Music:

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.
Subscribe
  • Post a new comment

    Error

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.
  • 1 comment