Make your own free website on Tripod.com
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") {
color=pallete;
document.images[spot].src=color+".gif";
out="press return to stop drawing "+pallete;
}
else {
pallete=color;
color="off";
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) {
pallete=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 ==
"http://members.tripod.com/~AO/iconiser/black.gif" ||
document.images[i].src == "black.gif") iconData += 1;
if (document.images[i].src ==
"http://members.tripod.com/~AO/iconiser/white.gif" ||
document.images[i].src == "white.gif") iconData += 0;
}
document.location="icons.html?"+iconData
}

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()>

<CENTER>>

It goes back into javascript and a loop writes all of the fancy image tags.
<SCRIPT>
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++}
document.write('<br>')}
</SCRIPT>

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