This pulls a random image from a list of 5 (reload for an 80% chance of a different image). The source goes inside the body of the HTML and is appended to the end of this file.

The filenames and textual descriptions go in the arrays filename and alttext. For convenience I've also specified fileroot for a common path which gets prepended to the filename. It should work with any number of images, but make sure the arrays are the same length!

Note the HTML comments and noscript tags. A browser with no javascript support (or javascript turned off) will render the HTML inside the noscript tag, so put a static image tag in there; that way they'll always see the same image, but that's better than nothing.

I guess you'll want to use images of the same height and width for the real version, in which case you can add width=x height=y immediately after img in the document.write command (and any other tags, of course).

<script type="text/javascript"> <!-- var fileroot="http://www.york.ac.uk/images/library/campus/"; var filename=new Array("goose-l.jpg","rainbow-l.jpg","bench-l.jpg", "bridge-l.jpg","fountain-l.jpg"); var alttext=new Array("Goose","Rainbow","Bench","Langwith Bridge","Fountain"); var n=Math.round(Math.random()*(filename.length-1)); document.write('<img src="'+fileroot+filename[n]+'" alt="'+alttext[n]+'">'); --> </script> <noscript> <img src="some image" alt="some text"> </noscript>