If you are familiar with the basics of javascript, it is simple to make a new image appear with every page refresh.

1. First, create an array of the photos involved. You can do this in the same way as creating any other arrays:
var pics = new Array("defaultpic.jpg", "picname.jpg", "picname2.bmp", "picname3.png");


Then, create a function that will be called when the body refreshes:

function newPic();

2.
From within the function, create a variable that will be a random number that determines the index of the array that is called.

Nesting math.random into math.floor guarantees that you will get whole numbers, and multiplying by the right numbers allows you to use your whole array. But don’t go too high or low!

(A tutorial on math.random and math.floor is available here.)

Here is that random number:
var randNr = Math.floor(Math.random()*2+1);
//(you want to multiply by the second to the last array number (knowing that arrays start at zero), and add //1.

3. Within the function, put in some failsafes:

a. Just in case something freakish happens and randNr falls below zero.
if (randNr < 0) {
randNr = 0;
document.newpic.src = "http://server/imagesfile/" + pics[randNr];
}

b. Just in case something freakish happens and randNr is greater than the size of the array (remember that arrays start at 0.)
else if (randNr > 3) {
picNr = 3;
document.newpic.src = "http://server/imagesfile/" + pics[randNr];
}

c. Code for the normal condition:
else {
document.newpic.src = "http://server/imagesfile/" + pics[randNr];
};
};

4. Put it all together:

var pics = new Array("defaultpic.jpg", "picname.jpg", "picname2.bmp", "picname3.png");

function newPic(){
var randNr = Math.floor(Math.random()*2+1);

if (randNr < 0) {

randNr = 0;

document.newpic.src = "http://server/imagesfile/" + pics[randNr];

} else if (randNr > 3) {

randNr = 3;

document.newpic.src = "http://server/imagesfile/" + pics[randNr];
}
else {
document.newpic.src = "http://server/imagesfile/" + pics[randNr];
};
};

Create and save as a javascript file, upload to a directory that will be accessible to your website.

Then from the html for your page, set up a call to the function at reload:

< body onload="newPic();">

Place the link to the javascript file and name the “newpic” image that will be changed. Be sure to start with an original image that will work if the javascript call doesn’t work; I used a transparent dot.

I’ve used this technique here with an array of 2 pictures of kittens and 2 of puppies. Try it out.

Grassroots Leadership College Draft One

Two other IT volunteers and I created and implimented a new website design for Madison, WI nonprofit Grassroots Leadership College. The staff has more time for teaching and working in the community than for learning code, so web consultant Sam Katz suggested nearly-WYSIWYG Weebly as a good long-term solution. Tom Bowman came up with a design and wrote custom CSS to expand the cramped Weebly template. I wrote custom javascript and html, and worked with the team to figured out what high-and-low-tech solutions we could reasonably expect the staff to maintain with a revolving door of volunteers.

Again and again, we IT folk wanted to choose something more complex because of our knowledge base, but realized the simple solutions were more robust for this group.

Right now the site is a bit bare-bones, but they have a good starting point to communicate with their stakeholders.