I'm teaching the From Prints To Online: Updating Your Website class today at PCNW, and I had someone ask how they could random show an image on their home page.  All of the students aren't really web designer or developers, but fine art photographers.  They know and understand photography like the back of their hands, but not HTML, CSS or JavaScript.

Normally with a big class, I would have said it's a little too hard to teach to all 12 students (remember, these are not people who understand code).  But, I've got a small class this weekend, so I figured why not.  I also figured I might as well post it for those who are interested.

In the head, you'll need to paste the following code:

<script type="text/javascript" language="JavaScript">
    MyImages=new Array();
    MyImages[0]='034.jpg';
    MyImages[1]='038.jpg';
    MyImages[2]='acid2.jpg';
    MyImages[3]='boat.jpg';

    function newImage()
    {
        document.getElementById("mainImage").setAttribute("src", MyImages[Math.round(Math.random()*3)])
    }
</script>

You'll obviously need to change the file names to what ever files you want to load.

In the <body> tag, you'll also need to add onload="newImage()", so you get something like <body onload="newImage()">

Finally, you need to make sure that you have an image with an ID of "mainImage" on your page somewhere.  If you don't, you'll get JavaScript errors.

<img id="mainImage" />

Hope this helps!