Correction to my comments about Internet Explorer. I just got a new computer and it seems Internet Explorer can now use the image array.

<SCRIPT language=javascript>
This sets up a few variables that are used later in the program.
var color="black";
var pallete="black"

This initialises the image array... yu gotta du it
pixie = new Array();
for (i=0; i<400; i++) {pixie[i] = new Image()}

This is the script that runs each time you move the select box. "spot" is the map location passed from the onmouseover event.
function flow(spot)
{if (color!="off") document.images[spot].src=color+".gif"}

This is the script that runs if you click on a square. Again, I use spot to receive the map location.
function penToggle(spot) {
if (color=="off") {
out="press return to stop drawing "+pallete;
else {
out="press return to start drawing "+pallete

This runs when you click on one of the color selector squares. "tint" is passed from the link as a string of letters, "black" or "white".
function bucket(tint) {
out="press return to start drawing "+pallete

This loops through each image assembling the pattern into 1s and 0s, then sends you to the new URL
function save() {
iconData = "";
for (i=0; i<=400; i++) {
if (document.images[i].src ==
"" ||
document.images[i].src == "black.gif") iconData += 1;
if (document.images[i].src ==
"" ||
document.images[i].src == "white.gif") iconData += 0;

We briefly leave javascript... the pentoggle() function runs at the end of the BODY tag, which helps set up the routines.
</SCRIPT></HEAD BODY BACKGROUND="" BGCOLOR="#88ff00" TEXT="#000000" LINK="#0000ff" VLINK="#800080" ALINK="#ff0000" ONLOAD=penToggle()>


It goes back into javascript and a loop writes all of the fancy image tags.
y=0; while (y<400)
{for (i=0; i<20; i++)
{document.write('<A href="javascript:penToggle('+y+')" ONMOUSEOVER="flow('+y+'); status=out; return true"><img src="white.gif" border=0 height=10 width=10></A>'); y++}

The color selectors are written in regular HTML
<A href='javascript:bucket("white")'><img
src="white.gif" width=100 height=20
href='javascript:bucket("black")'><img src="black.gif"
width=100 height=20 border=0></A>
<br><A href=javascript:save()>SAVE</A>