JavaScript Image Switcher

The Code

	////////////////////////////////////////////////////////////////////////////////////////
	// DISCLAIMER - This code is from 2001. It  works, but has  been much the same since. //
	// ALSO - i have  reformatted somewhat  to fit my  template, it may  need adjusting.  //
	// these have been shortened to 2 images for brevity sake, add as many as you please. //
	// these images are NOT preloaded anywhere, b/c i usually have 50+ in my header file. //
	// you  can preload  the images with  a standard preload  rollover script if need be. //
	// i stupidly hardcoded it for jpeg only... that  should be easy  enough for  fixing. //
	// FOR MORE HELP WITH JAVASCRIPT, I SINCERELY RECOMMEND JavaScript by David Flannaan. //
	////////////////////////////////////////////////////////////////////////////////////////
var arrHeaderOptions = new Array("june04/benfranklin-bridge-philly","path/to/next/image");
var arrHeaderAltTags = new Array("Ben Franklin Bridge - Philadelphia","next image title");

function writeRandomHeader(){
  var x = Math.round(arrHeaderOptions.length * Math.random())-1;
  x < 0 ? x = 0 : x = x;
  var strHeaderImg = "<form name=\"headerChooser\">";
  strHeaderImg += "<a href=\"javascript:randomHeader();\" title=\"click to pick random image\" >";
  strHeaderImg += "<img onclick=\"\" src=\"/images/header/" + arrHeaderOptions[x] + ".jpg\" ";
  strHeaderImg += "width=\"764\" border=\"0\" name=\"header\" ";
  strHeaderImg += "alt=\"click the image to load a random header\">";
  strHeaderImg += "</a>"
  document.write(strHeaderImg);
  document.write("<br/>")
  document.write("<span><a href=\"javascript:randomHeader();\" >random</a>, ";
  document.write("<a href=\"/worklogs/index.php?pg=ap\">all</a> or choose -> </span>");
  headerSelector(arrHeaderAltTags,x);
  document.write("</form>");
}

function randomHeader(){
  var y = Math.round(arrHeaderOptions.length * Math.random())-1;
  y < 0 ? y = 0 : y = y;
  document.header.src="/images/header/" + arrHeaderOptions[y] + ".jpg";
  document.headerChooser.allHeaders.selectedIndex = y;
}

function customHeader(x){
  if(x=="all"){
    window.location="/worklogs/index.php?pg=ap";
  }
  document.header.src="/images/header/" + arrHeaderOptions[x] + ".jpg";
  document.headerChooser.allHeaders.selectedIndex = x;
}

function headerSelector(arrOptions,selected){
  var x
  var strSelector = "<select onchange=\"customHeader(this.options[this.selectedIndex].value);\" ";
    strSelector += " name=\"allHeaders\" class=\"headerSelector\">"
  for(x in arrOptions){
    var thisOption = new String(arrOptions[x]);
    if(selected==x){
      strSelector += "<option selected value=\"" + x + "\">" + thisOption + "</option>";
    }else{
      strSelector += "<option value=\"" + x + "\">" + thisOption + "</option>";
    }
  }
  strSelector += "<option value=\"all\">All Images</option>";
  strSelector = strSelector + "</select>";
  document.write(strSelector);
  document.headerChooser.allHeaders.selectedIndex = selected;
}

function allHeaders(){
  var x; 
  for(x in arrHeaderOptions){
    document.write("<a href=\"#\" onclick=\"javascript:customHeader("+x+");\" >");
    document.write("<img border=\"0\" src=\"/images/header/" + arrHeaderOptions[x] + ".jpg\" ");
    document.write("border=\"1\" width=\"744\" border=\"0\" alt=\"" + arrHeaderAltTags[x] + "\">");
    document.write("</a><BR>" + arrHeaderAltTags[x] + "<BR><BR>")
  }
}
    

Just call the function you want to use depending on if you want to set up the header: writeRandomHeader();, or all the images in an index: allHeaders();, or to update the image dynamically you can use either randomHeader(); to reset the select and image dynamically, or customHeader(); will set them to whatever you pass in. This is just basic html layout with break tags, but you could use any html.

The Pictures

all the pictures