More problems converting Ascii images to JS [Archive]

prawn_86

10-11-2004, 02:00 AM

hi all,

i am trying to(and have) converted an ascii image into JS. What i want to do now is have the user be able to enter a character from the image that they want changed, and a character that they want it changed to. the page and script i have developed so far is as follows:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Javascript</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="Style.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/javascript">

pic = new Array();

function WritePic()
{
var numCol = 8;

pic = ["i", "\\", "/", "\\", "/", "\\", "i", " ", "|", " ", " ", " ", " ", " ", "|", " ", "|", " ", " ", " ", " ", " ", "|", " ", "|", " ", "(", "0", ")", "(", "0", ")", "C", " ", " ", " ", " ", " ", "_", ")", "|", " ", " ", "'", "_", "_", "_", "|", "|", " ", " ", " ", " ", " ", "/", " ", "|", " ", " ", "  ", "/", " ", " ", " "]

document.write("<div style='font-family:monospace'>");
for(row = 0; row < 8; row++) {
for(col = 0; col < 8; col++) {
document.write(pic[numCol*row+col]);
}
document.write("<br/>");
}
document.write("</div>");
}

function ChangePic()
{
char = document.frmPic.txtChangeChar.value;
for(num = 0; num < 63; num++){
if(pic[num] = char){
pic[num] = document.frmPic.txtNewChar.value;
}
}
}

</script>
</head>
<body>
<form name="frmPic" id="frmPic" action = "">
<script language="JavaScript" type="text/javascript">
WritePic()
</script>
<p>Please insert a character that you would like changed: <br />
<input name="txtChangeChar" type="text" id="txtChangeChar" maxlength="1" />
<br />
Please insert the character you would like it changed to:<br />
<input name="txtNewChar" type="text" id="txtNewChar" maxlength="1" />
</p>
<p>
<input name="btnChange" type="button" id="btnChange" value="Change" onClick = "ChangePic()"/>
</p>
<p> </p>
</form>
<p align="center"><font size="2" face="Arial, Helvetica, sans-serif"><a href="index.htm">Back
to main page</a></font></p>
</body>
</html>

the main problem i am having is rewriting the picture without it going over the whole form. i want it to still have the text boxes and stuff. also it doesnt change when the user inputs anything!
any help would be greatly appreciated.
Regards Shaun

PS - in the array i have put &npsb; for the spaces so dont worry about that part

Willy Duitt

10-11-2004, 06:53 AM

Try this:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Javascript</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="Style.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/javascript">

pic = new Array();

function WritePic()
{
var numCol = 8;

pic = ["i", "\\", "/", "\\", "/", "\\", "i", " ", "|", " ", " ", " ", " ", " ", "|", " ", "|", " ", " ", " ", " ", " ", "|", " ", "|", " ", "(", "0", ")", "(", "0", ")", "C", " ", " ", " ", " ", " ", "_", ")", "|", " ", " ", "'", "_", "_", "_", "|", "|", " ", " ", " ", " ", " ", "/", " ", "|", " ", " ", " ", "/", " ", " ", " "]

document.write("<div style='font-family:monospace' id='image'><pre>");
for(row = 0; row < 8; row++) {
for(col = 0; col < 8; col++) {
document.write(pic[numCol*row+col]);
}
document.write("<br/>");
}
document.write("</pre></div>");
}

function ChangePic(oldChar,newChar){
var image = document.getElementById('image');
if(image.innerHTML.match(oldChar,'g')){
image.innerHTML = image.innerHTML.replace(new RegExp(oldChar,'g'),newChar);
} else{alert('The character you picked is not present... Please pick again!')}
}

</script>
</head>
<body>
<form name="frmPic" id="frmPic" action = "">
<script language="JavaScript" type="text/javascript">
WritePic()
</script>
<p>Please insert a character that you would like changed: <br />
<input name="oldChar" type="text" id="txtChangeChar" maxlength="1" />
<br />
Please insert the character you would like it changed to:<br />
<input name="newChar" type="text" id="txtNewChar" maxlength="1" />
</p>
<p>
<input name="btnChange" type="button" id="btnChange" value="Change"
onclick="ChangePic(this.form.oldChar.value,this.form.newChar.value)" />
</p>
<p> </p>
</form>
<p align="center"><font size="2" face="Arial, Helvetica, sans-serif"><a href="index.htm">Back
to main page</a></font></p>
</body>
</html>

.....Willy