Files: index.html, display2.htm
index.html:
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<META NAME="GENERATOR" CONTENT="Mozilla/4.04 (Macintosh; I; PPC) [Netscape]">
<TITLE>Javascript Drawing Program</TITLE>
<SCRIPT language='javascript'>
x=15;y=16;
function number(i ,k) {
if (k == '0'){
document.images[i].src="black.gif";
}
else if (k == '1'){
document.images[i].src="orange.gif";
}
else if (k == '2'){
document.images[i].src="red.gif";
}
else if (k == '3'){
document.images[i].src="green.gif";
}
else if (k == '4'){
document.images[i].src="blue.gif";
}
else if (k == '5'){
document.images[i].src="yellow.gif";
}
else if (k == '6'){
document.images[i].src="purple.gif";
}
else if (k == '8'){
document.images[i].src="grey.gif";
}
else if (k == '9'){
document.images[i].src="ltgrey.gif";
}
else if (k == 'a'){
document.images[i].src="peach.gif";
}
else if (k == 'b'){
document.images[i].src="ltblue.gif";
}
else if (k == 'c'){
document.images[i].src="ltpurple.gif";
}
else if (k == 'd'){
document.images[i].src="turquoise.gif";
}
else if (k == 'e'){
document.images[i].src="brown.gif";
}
else if (k == 'f'){
document.images[i].src="ltgreen.gif";
}
else {
document.images[i].src="white.gif";
}
return k;
}
function color ( ) {
if (document.forms[2].color[1].checked == true) {
return '0';
}
else if (document.forms[2].color[2].checked == true) {
return '1';
}
else if (document.forms[2].color[3].checked == true) {
return '2';
}
else if (document.forms[2].color[4].checked == true) {
return '3';
}
else if (document.forms[2].color[5].checked == true) {
return '4';
}
else if (document.forms[2].color[6].checked == true) {
return '5';
}
else if (document.forms[2].color[7].checked == true) {
return '6';
}
else if (document.forms[2].color[8].checked == true) {
return '8';
}
else if (document.forms[2].color[9].checked == true) {
return '9';
}
else if (document.forms[2].color[10].checked == true) {
return 'a';
}
else if (document.forms[2].color[11].checked == true) {
return 'b';
}
else if (document.forms[2].color[12].checked == true) {
return 'c';
}
else if (document.forms[2].color[13].checked == true) {
return 'd';
}
else if (document.forms[2].color[14].checked == true) {
return 'e';
}
else if (document.forms[2].color[15].checked == true) {
return 'f';
}
else {
return '7';
}
}
function makePad(x,y) {
x=eval(x);
y=eval(y);
num= new Array(x*y);
document.writeln("<center><table border=4 cellspacing=0 cellpadding=0 >");
for (i=0;i<y;i++) {
document.writeln("<tr>");
for (a=0;a<x;a++) {
document.writeln("<td><a href=#blah onmouseover='num["+eval(i*(eval(x))+a)+"]=number("+eval(i*(eval(x))+a)+",color());'><img src=white.gif border=0 width=10 height=10></a></td>");
num[eval(i*(eval(x))+a)]=7;
}
document.writeln("</tr>");
}
document.writeln("</table>");
document.writeln("<form >");
document.writeln("<input type=submit value='click here to clear'></form>");
document.writeln("<form><input type=button value=save onclick=save='';save+=x+','+y+',';for(b=0;b<(eval(x*y));b++){save+=num[b];}this.form.info.value=save;>");
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#bbbbbb">
<SCRIPT language=javascript>
x=15;y=16;
makePad(x,y);
document.writeln("<input type textarea name=info></form>");
document.writeln("<br><a href=display2.htm>view saved pictures</a>");
</SCRIPT>
<form><table><tr>
<br><font size=4><td><img src="white.gif" border=2></td><td><img src="black.gif" border=2></td><td><img src="orange.gif" border=2></td>
<td><img src="red.gif" border=2></td><td><img src="green.gif" border=2></td>
<td><img src="blue.gif" border=2></td><td><img src="yellow.gif" border=2></td>
<td><img src="purple.gif" border=2></td></tr><tr><td>
<input type=radio default name=color value="white"></td><td>
<input type=radio name="color" value="black"></td><td>
<input type=radio name="color" value="orange"></td><td>
<input type=radio name="color" value="red"></td><td>
<input type=radio name="color" value="green"></td><td>
<input type=radio name="color" value="blue"></td><td>
<input type=radio name="color" value="yellow"></td><td>
<input type=radio name="color" value="purple"></td></tr>
<tr><td><img src="grey.gif" border=2></td>
<td><img src="ltgrey.gif" border=2></td>
<td><img src="peach.gif" border=2></td>
<td><img src="ltblue.gif" border=2></td><td><img src="ltpurple.gif" border=2></td>
<td><img src="turquoise.gif" border=2></td><td><img src="brown.gif" border=2></td>
<td><img src="ltgreen.gif" border=2></td></tr><tr><td>
<input type=radio name="color" value="grey"></td>
<td>
<input type=radio name="color" value="ltgrey"></td><td>
<input type=radio name="color" value="peach"></td><td>
<input type=radio name="color" value="ltblue"></td><td>
<input type=radio name="color" value="ltpurple"></td><td>
<input type=radio name="color" value="turqoise"></td><td>
<input type=radio name="color" value="brown"></td><td>
<input type=radio name="color" value="ltgreen"></td></table>
</font></form></center>
<p><font color=#bb1199>To save: click the save button, then copy the text that appears.<br>when you want to display a picture, click on 'view saved pictures' and paste the information in the picture data field on that page.
</BODY>
</HTML>
-----------------------------------------------------------
display2.htm:
<html><head><title>hello</title>
<script language="javascript">
function number(k) {
if (k == '0'){
return "black.gif";
}
else if (k == '1'){
return "orange.gif";
}
else if (k == '2'){
return "red.gif";
}
else if (k == '3'){
return "green.gif";
}
else if (k == '4'){
return "blue.gif";
}
else if (k == '5'){
return "yellow.gif";
}
else if (k == '6'){
return "purple.gif";
}
else if (k == '8'){
return "grey.gif";
}
else if (k == '9'){
return "ltgrey.gif";
}
else if (k == 'a'){
return "peach.gif";
}
else if (k == 'b'){
return "ltblue.gif";
}
else if (k == 'c'){
return "ltpurple.gif";
}
else if (k == 'd'){
return "turquoise.gif";
}
else if (k == 'e'){
return "brown.gif";
}
else if (k == 'f'){
return "ltgreen.gif";
}
else {
return "white.gif";
}
}
function display(name,screen,size,hello,mouseover,mouseout) {
var i =0 ;
var x='';
var y='';
while ( hello.charAt(i)!=",") {
x+=hello.charAt(i);
i++;
}
i++;
while (hello.charAt(i)!=",") {
y+=hello.charAt(i);
i++
}
i++;
j=0;
num= new Array(eval(x*y));
while (hello.charAt(i)) {
num[j]=hello.charAt(i);
j++; i++;
}
screen.document.writeln("<center><table border=0 cellspacing=0 cellpadding=0>");
for (i=0;i<(eval(y));i++) {
screen.document.writeln("<tr>");
for (a=0;a<(eval(x));a++) {
screen.document.write("<td><a href=#blah ");
if (mouseover == "yes") {
document.write("onmouseover=action("+eval(i*(eval(x))+a)+",'"+name+"') ");
}
if (mouseout == "yes") {
document.write("onmouseout=action("+eval(i*(eval(x))+a)+",'"+name+"') ");
}
screen.document.writeln(" ><img src='"+number(num[i*(eval(x))+a])+"' border=0 width="+size+" height="+size+"></a></td>");
}
screen.document.writeln("</tr>");
}
screen.document.writeln("</table>");
}
function change (start, data) {
var i =0 ;
var x='';
var y='';
while ( data.charAt(i)!=",") {
x+=data.charAt(i);
i++;
}
i++;
while (data.charAt(i)!=",") {
y+=data.charAt(i);
i++
}
i++;
j=0;
num= new Array(eval(x*y));
while (data.charAt(i)) {
num[j]=data.charAt(i);
j++; i++;
}
for (i=0;i<(eval(x*y));i++) {
document.images[(eval(start+i))].src=number(num[(eval(i))]);
}
}
function action (i,name) {
if (name == 'arrow') {
if (document.images[(eval(i+64))].src == 'http://www.humboldt1.com/~medusa/blue.gif' ) {
change(64, "7,6,777177777717777771777717171777111777771777");
}
if (document.images[(eval(i+64))].src == 'http://www.humboldt1.com/~medusa/white.gif') {
change(64, "7,6,777477777747777774777747474777444777774777");
}
}
else if (name == 'tree'){
if (document.images[(eval(i+106))].src == 'http://www.humboldt1.com/~medusa/brown.gif') {
change(106, "15,16,444444444444444b44b4444b4444b44444b44444b444444444444b4444b444444444444444444b444444b44b44b4443333444444444b43333333444444433333333344bb44333333333344444333333333344443334eebe333344b3334eeee44b4b444444ee44b444444bb44eeb44b4b4f2f2feeef2f2ff2");
document.forms[0].elements[1].value="Shake that tree";
}
}
}
function animate(which) {
if (eval(which) == 1) {
change(0,"8,8,7744447774444447440440444444444440444404440000447444444777444477");
num=2;
}
else if (eval(which) == 2) {
change(0,"8,8,7799997779999997990990999999999990999909990000997999999777999977");
num=3;
}
else if (eval(which) == 3) {
change(0,"8,8,7722227772222227220220222222222220222202220000227222222777222277");
num=4;
}
else if (eval(which) == 4) {
change(0,"8,8,77aaaa777aaaaaa7aa0aa0aaaaaaaaaaa0aaaa0aaa0000aa7aaaaaa777aaaa77");
num=5;
}
else if (eval(which) == 5) {
change(0,"8,8,7711117771111117110110111111111110111101110000117111111777111177");
num=6;
}
else if (eval(which) ==6) {
change(0,"8,8,7755557775555557550550555555555550555505550000557555555777555577");
num=1;
}
ID= setTimeout("animate("+num+")",200);
}
</script>
</head><body bgcolor=#ffffff>
<script language="javascript">
display("smile",self,5,"8,8,7755557775555557550550555555555550555505550000557555555777555577","","");
animate(1);
</script>
<form><b>picture data</b><br>
<input type="textarea" name="info">
<br><b>size in pixels (default 10)</b><br>
<input value='10' type="textarea" name=size><br>
<input type=button value="draw!" onclick="popup= window.open('','','toolbar=no,location=no,directories=no,status=no,scrollbars=yes,resizeable=yes,copyhistory=no,width=500,height=500');display('drawing',popup,this.form.size.value,this.form.info.value,'','');popup.document.writeln('<p><br></p>')">
</form>
<br><a href=draw.htm>make new pictures</a><p><font size=6 color=#22dd11>!Important!</font><br>(this means you)
<script language='javascript'>
display("arrow",self,7, "7,6,777277777727777772777727272777222777772777","yes","yes");
</script><br><a href=page/index.html target=_top>My web page</a><p></p>
<script language=javascript>
display("tree",self,7,"15,16,444444444444444b44b4444b4444b44444b44444b444444444444b4444b444444444444444444b444444b44b44b4443333444444444b43333333444444433233233344bb44333333323344444333323333344443334eebe333344b2324eeee44b4b444444ee44b444444bb44eeb44b4b4fffffeeefffffff","yes","yes");
</script>
</body></html>