In this chapter you are going to apply some of what you have learned to build a simple application that demonstrates how, with very basic JavaScript, it is possible to create the impression of a sophisticated interactive application.
You are going to design an application that enables users to build their own cartoon faces out of a library of existing eyes, noses and mouths. No drawing skill is required for the user.
The application has several basic requirements:
In order to build this face program, you need to define the frameset, which contains all the elements of the interface and application.
To do this, you will use the frameset in Listing 11.1.
Input
<FRAMESET ROWS="150,150,150,*">
<FRAMESET COLS="400,*">
<FRAME SRC="eye1.gif" NAME="eye" MARGINHEIGHT=0 MARGINWIDTH=0 SCROLLING="no">
<FRAME SRC="eyes.htm" MARGINHEIGHT=0 MARGINWIDTH=0 SCROLLING="auto">
</FRAMESET>
<FRAMESET COLS="400,*">
<FRAME SRC="nose1.gif" NAME="nose" MARGINHEIGHT=0 MARGINWIDTH=0 SCROLLING="no">
<FRAME SRC="noses.htm" MARGINHEIGHT=0 MARGINWIDTH=0 SCROLLING="auto">
</FRAMESET>
<FRAMESET COLS="400,*">
<FRAME SRC="mouth1.gif" NAME="mouth" MARGINHEIGHT=0 MARGINWIDTH=0 SCROLLING="no">
<FRAME SRC="mouths.htm" MARGINHEIGHT=0 MARGINWIDTH=0 SCROLLING="auto">
</FRAMESET>
<FRAME SRC="build.htm">
</FRAMESET>
This sets up a four-row grid. The top three rows are each divided into two columns: The left side displays the current selection for the eyes, nose, or mouth, and the right
side presents all the available choices.
The bottom row is where the control buttons to build the face and generate a random face appear.
Based on this, you need to create four other HTML files (see Listing 11.2 through 11.5) which are the basis of the program: eyes.htm, noses.htm, mouths.htm and build.htm.
INPUT
<!-- SOURCE CODE FOR eyes.htm -->
<BODY BGCOLOR="iceblue">
<TABLE BORDER=0>
<TR>
<TD><A HREF="eye1.gif" TARGET="eye">
<IMG SRC="eye1sample.gif" BORDER=0></A></TD>
<TD><A HREF="eye2.gif" TARGET="eye">
<IMG SRC="eye2sample.gif" BORDER=0></A></TD>
</TR>
<TR>
<TD><A HREF="eye3.gif" TARGET="eye"">
<IMG SRC="eye3sample.gif" BORDER=0></A></TD>
<TD><A HREF="eye4.gif" TARGET="eye">
<IMG SRC="eye4sample.gif" BORDER=0></A></TD>
</TR>
</TABLE>
</BODY>
Input
<!-- SOURCE CODE FOR noses.htm -->
<BODY BGCOLOR="iceblue">
<TABLE BORDER=0>
<TR>
<TD><A HREF="nose1.gif" TARGET="nose">
<IMG SRC="nose1sample.gif" BORDER=0></A></TD>
<TD><A HREF="nose2.gif" TARGET="nose">
<IMG SRC="nose2sample.gif" BORDER=0></A></TD>
</TR>
<TR>
<TD><A HREF="nose3.gif" TARGET="nose">
<IMG SRC="nose3sample.gif" BORDER=0></A></TD>
<TD><A HREF="nose4.gif" TAGRET="nose">
<IMG SRC="nose4sample.gif" BORDER=0></A></TD>
</TR>
</TABLE>
</BODY>
Input
<!-- SOURCE CODE FOR mouths.htm -->
<BODY BGCOLOR="iceblue">
<TABLE BORDER=0>
<TR>
<TD><A HREF="mouth1.gif" TARGET="mouth">
<IMG SRC="mouth1sample.gif" BORDER=0></A></TD>
<TD><A HREF="mouth2.gif" TAGRET="mouth">
<IMG SRC="mouth2sample.gif" BORDER=0></A></TD>
</TR>
<TR>
<TD><A HREF="mouth3.gif" TARGET="mouth">
<IMG SRC="mouth3sample.gif" BORDER=0></A></TD>
<TD><A HREF="mouth4.gif" TARGET="mouth">
<IMG SRC="mouth4sample.gif" BORDER=0></A></TD>
</TR>
</TABLE>
</BODY>
The file build.htm (Listing 11.5) provides the controls in the bottom frame:
Input
<!-- SOURCE CODE FOR build.html -->
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- HIDE FROM OTHER BROWSERS
function buildFace() {
var eye = parent.eye.location;
var nose = parent.nose.location;
var mouth = parent.mouth.location;
var face = window.open("","builtFace","width=400,height=450");
face.document.open("text/html");
face.document.write('<IMG SRC="' + eye + '">');
face.document.write('<IMG SRC="' + nose + '">');
face.document.write('<IMG SRC="' + mouth + '">');
face.document.close();
}
function randomFace() {
var eye = "eye" + getRandom() + ".gif";
var nose = "nose" + getRandom() + ".gif";
var mouth = "mouth" + getRandom() + ".gif";
parent.eye.location = eye;
parent.nose.location = nose;
parent.mouth.location = mouth;
}
function getRandom() {
today = new Date();
var bigNumber = today.getSeconds() * today.getTime() * Math.sqrt(today.getMinutes());
var randomNum = (bigNumber % 4) + 1;
return Math.floor(randomNum);
}
// STOP HIDING -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#000000" TEXT="iceblue">
<FORM METHOD=POST>
<CENTER>
<INPUT TYPE="button" VALUE="Build This Face" onClick="buildFace();">
<INPUT TYPE="button" VALUE="Make A Random Face" onClick="randomFace();">
</CENTER>
</FORM>
</BODY>
OUTPUT
The results of this application appear like those in Figures 11.1 and 11.2.
Figure 11.1. Choosing a facial feature updates the relevant frame on the left.
Figure 11.2. Clicking on the build button causes a new window to open.
End of Output
Analysis
The first thing to notice about the four HTML documents is that three of them—eyes.htm, noses.htm, and mouths.htm—are very similar.
This is because all three files play the same role: They present options for the user to select for each of three parts of the face.
Each file displays four options in a 2x2 table. Each of the small images displayed is in fact a link targeted to the appropriate frame on the left. When the user clicks on one of the sample images,
the full-size version of that feature is displayed in the corresponding frame on the left.
You use JavaScript in the build.htm document. Here you have three functions related to the two buttons displayed in the bottom frame of the frameset: buildFace(), randomFace(), and getRandom().
buildFace() and randomFace() are called by the event handlers of the two buttons:
<INPUT TYPE="button" VALUE="Build This Face" onClick="buildFace();"> <INPUT TYPE="button" VALUE="Make A Random Face" onClick="randomFace();">
The buildFace() function takes the three pieces of the face in the three frames and displays them in a single new window. This function needs to find out which files are displayed in each of the
three left frames and then build a single HTML file that displays the three files in a single window.
function buildFace() {
var eye = parent.eye.location;
var nose = parent.nose.location;
var mouth = parent.mouth.location;
var face = window.open("","builtFace","width=400,height=450");
face.document.open("text/html");
face.document.write('<IMG SRC="' + eye + '">');
face.document.write('<IMG SRC="' + nose + '">');
face.document.write('<IMG SRC="' + mouth + '">');
face.document.close();
}
The function starts by getting the URLs of the three selected facial features with the location property of the frame object, as in the example var eye = parent.eye.location;. You use the fact that you can address object properties by name in the structure parent.eye to reference each frame.
Once this is done, a new window of the desired size is opened using
var face =window.open("","builtFace","width=400,height=450");
This command specifies the size of the window in pixels using the optional windows attributes argument. The new object for this window is called face so that you can later
use commands like face.document.write().
Once the window is open, you open an HTML output stream using face.document.open("text/html") and then write out the three image tags based on the URLs you got earlier. Finally, you close
the document output stream.
The randomFace() function simply selects three random facial features and then opens them in the appropriate frames. This is done by calling the
getRandom() function, which returns a number from 1 to 4 and then building three filenames, such as var eye = "eye" + getRandom() + ".gif".
function randomFace() {
var eye = "eye" + getRandom() + ".gif";
var nose = "nose" + getRandom() + ".gif";
var mouth = "mouth" + getRandom() + ".gif";
parent.eye.location = eye;
parent.nose.location = nose;
parent.mouth.location = mouth;
}
Once this is done, the three files are opened using window.open().
The getRandom() function is designed to return a random number from one to four. This is done by creating a new date object for the current date
and time, getting a large number by multiplying together different elements of the date object, and then taking the modulus by four and adding one, as shown in the following lines.
function getRandom() {
today = new Date();
var bigNumber = today.getSeconds() * today.getTime() * Math.sqrt(today.getMinutes());
var randomNum = (bigNumber % 4) + 1;
return Math.floor(randomNum);
}
The result is a pseudo-random number from one to four (because the modulus returns a number greater than or equal to zero and less than four). The use of Math.floor() ensures that the number returned is an integer.
There are a couple of limitations to the current script that you might like to improve:
In order to expand the script to support more than four choices for each feature, you need to make changes to each of the HTML files, including the parent frameset.
You start by adding a small script to the parent frameset (Listing 11.1).
<SCRIPT LANGUAGE="JavaScript"> <!-- HIDE FROM OTHER BROWSERS var numEyes = 4; var numNoses = 4; var numMouths = 4; // STOP HIDING --> </SCRIPT>
This script is where you set the number of options for each of the three facial features. That way, if you want to add or remove choices, you only need to change these three numbers, and the whole
program will work.
Next, you need to alter the three files eyes.htm, noses.htm, and mouths.htm (Listing 11.2 through 11.4) so that you use JavaScript to dynamically build two-row tables, regardless of the number of choices.
By way of example, this is what eyes.html would look like:
<BODY BGCOLOR="iceblue">
<TABLE BORDER=0>
<TR>
<SCRIPT LANGUAGE="JavaScript">
<!-- HIDE FORM OTHER BROWSERS
for (var i = 1; i <= Math.floor(parent.numEyes / 2); i ++) {
document.write('<TD><A HREF="eye' + i + '.gif" TARGET="eye">');
document.write('<IMG SRC="eye' + i + 'sample.gif" BORDER=0></A></TD>');
}
// STOP HIDING -->
</SCRIPT>
</TR>
<TR>
<SCRIPT LANGUAGE="JavaScript">
<!-- HIDE FORM OTHER BROWSERS
for (var i = Math.floor(parent.numEyes / 2) + 1; i <= parent.numEyes; i ++) {
document.write('<TD><A HREF="eye' + i + '.gif" TARGET="eye">');
document.write('<IMG SRC="eye' + i + 'sample.gif" BORDER=0></A></TD>');
}
// STOP HIDING -->
</SCRIPT>
</TR>
</TABLE>
</BODY>
What you have added are two short scripts which build the table cells for each row of the table. The first script builds cells for each image from the first to the halfway point in the available
list, and the second builds from there to the end. You use Math.floor() to ensure that you are building filenames out of integer values.
Finally, you need to alter the randomFace() and getRandom() functions in build.html (Listing 11.5). getRandom() now takes an argument which is the range it is supposed to return (that is, from 1 to num). randomFace() passes the appropriate variable from
the parent frameset for each function call to getRandom().
function randomFace() {
var eye = "eye" + getRandom(parent.numEyes) + ".gif";
var nose = "nose" + getRandom(parent.numNoses) + ".gif";
var mouth = "mouth" + getRandom(parent.numMouths) + ".gif";
parent.eye.location = eye;
parent.nose.location = nose;
parent.mouth.location = mouth;
}
function getRandom(num) {
today = new Date();
var bigNumber = today.getSeconds() * today.getTime() * Math.sqrt(today.getMinutes());
var randomNum = bigNumber % num + 1;
return Math.floor(randomNum);
}
In order to build each face in a new window, you need to make far fewer changes than you made to support the variable number of choices for each facial attribute.
All the changes are made to the file build.htm. You add a global variable called windowNumber, which you increment for each window you open. Then you make one change to the function buildFace() on the line where you open the window:
var face = window.open("","builtFace" + windowNumber ++,"width=400,height=450");
This builds a new window name based on the value of windowNumber and then increments windowNumber by one. Remember that the unary increment operator (++) after an expression first evaluates the expression (in this case that is simply windowNumber) and
then increments the expression.
Navigator includes a special target _blank which, when used in conjunction with window.open(), opens a new window. For instance, window.open("","_blank") opens a new empty window.
To help you see all the changes you have made, here is the source code including all the changes. I am only including eyes.htm (and not noses.htm or mouths.htm) since the changes are the same in these three files.
Input
<!-- SOURCE CODE FOR PARENT FRAMESET -->
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- HIDE FROM OTHER BROWSERS
var numEyes = 4;
var numNoses = 4;
var numMouths = 4;
// STOP HIDING -->
</SCRIPT>
</HEAD>
<FRAMESET ROWS="150,150,150,*">
<FRAMESET COLS="400,*">
<FRAME SRC="eye1.gif" NAME="eye" MARGINHEIGHT=0 MARGINWIDTH=0 SCROLLING="no">
<FRAME SRC="eyes.htm" MARGINHEIGHT=0 MARGINWIDTH=0 SCROLLING="auto">
</FRAMESET>
<FRAMESET COLS="400,*">
<FRAME SRC="nose1.gif" NAME="nose" MARGINHEIGHT=0 MARGINWIDTH=0 SCROLLING="no">
<FRAME SRC="noses.htm" MARGINHEIGHT=0 MARGINWIDTH=0 SCROLLING="auto">
</FRAMESET>
<FRAMESET COLS="400,*">
<FRAME SRC="mouth1.gif" NAME="mouth" MARGINHEIGHT=0 MARGINWIDTH=0 SCROLLING="no">
<FRAME SRC="mouths.htm" MARGINHEIGHT=0 MARGINWIDTH=0 SCROLLING="auto">
</FRAMESET>
<FRAME SRC="build.htm">
</FRAMESET>
<!-- SOURCE CODE FOR build.html -->
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- HIDE FROM OTHER BROWSERS
var windowNumber = 1;
function buildFace() {
var eye = parent.eye.location;
var nose = parent.nose.location;
var mouth = parent.mouth.location;
var face = window.open("","builtFace" + windowNumber ++,"width=400,height=450");
face.document.open("text/html");
face.document.write('<IMG SRC="' + eye + '">');
face.document.write('<IMG SRC="' + nose + '">');
face.document.write('<IMG SRC="' + mouth + '">');
face.document.close();
}
function randomFace() {
var eye = "eye" + getRandom(parent.numEyes) + ".gif";
var nose = "nose" + getRandom(parent.numNoses) + ".gif";
var mouth = "mouth" + getRandom(parent.numMouths) + ".gif";
parent.eye.location = eye;
parent.nose.location = nose;
parent.mouth.location = mouth;
}
function getRandom(num) {
today = new Date();
var bigNumber = today.getSeconds() * today.getTime() * Math.sqrt(today.getMinutes());
var randomNum = Math.floor(bigNumber % num);
return randomNum + 1;
}
// STOP HIDING -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#000000" TEXT="iceblue">
<FORM METHOD=POST>
<CENTER>
<INPUT TYPE="button" VALUE="Build This Face" onClick="buildFace();">
<INPUT TYPE="button" VALUE="Make A Random Face" onClick="randomFace();">
</CENTER>
</FORM>
</BODY>
<!-- SOURCE CODE FOR eyes.html -->
<BODY BGCOLOR="iceblue">
<TABLE BORDER=0>
<TR>
<SCRIPT LANGUAGE="JavaScript">
<!-- HIDE FORM OTHER BROWSERS
for (var i = 1; i <= Math.floor(parent.numEyes / 2); i ++) {
document.write('<TD><A HREF="eye' + i + '.gif" TARGET="eye">');
document.write('<IMG SRC="eye' + i + 'sample.gif" BORDER=0></A></TD>');
}
// STOP HIDING -->
</SCRIPT>
</TR>
<TR>
<SCRIPT LANGUAGE="JavaScript">
<!-- HIDE FORM OTHER BROWSERS
for (var i = Math.floor(parent.numEyes / 2) + 1; i <= parent.numEyes; i ++) {
document.write('<TD><A HREF="eye' + i + '.gif" TARGET="eye">');
document.write('<IMG SRC="eye' + i + 'sample.gif" BORDER=0></A></TD>');
}
// STOP HIDING -->
</SCRIPT>
</TR>
</TABLE>
</BODY>
<!-- SOURCE CODE OF PARENT FRAMESET -->
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- HIDE FROM OTHER BROWSERS
//
// Cookie Functions - Second Helping (21-Jan-96)
// Written by: Bill Dortch, hIdaho Design <bdortch@netw.com>
// The following functions are released to the public domain.
//
// "Internal" function to return the decoded value of a cookie
//
function getCookieVal (offset) {
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}
//
// Function to return the value of the cookie specified by "name".
// name - String object containing the cookie name.
// returns - String object containing the cookie value, or null if
// the cookie does not exist.
//
function GetCookie (name) {
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return getCookieVal (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) break;
}
return null;
}
//
// Function to create or update a cookie.
// name - String object object containing the cookie name.
// value - String object containing the cookie value. May contain
// any valid string characters.
// [expires] - Date object containing the expiration data of the cookie. If
// omitted or null, expires the cookie at the end of the current session.
// [path] - String object indicating the path for which the cookie is valid.
// If omitted or null, uses the path of the calling document.
// [domain] - String object indicating the domain for which the cookie is
// valid. If omitted or null, uses the domain of the calling document.
// [secure] - Boolean (true/false) value indicating whether cookie transmission
// requires a secure channel (HTTPS).
//
// The first two parameters are required. The others, if supplied, must
// be passed in the order listed above. To omit an unused optional field,
// use null as a place holder. For example, to call SetCookie using name,
// value and path, you would code:
//
// SetCookie ("myCookieName", "myCookieValue", null, "/");
//
// Note that trailing omitted parameters do not require a placeholder.
//
// To set a secure cookie for path "/myPath", that expires after the
// current session, you might code:
//
// SetCookie (myCookieVar, cookieValueVar, null, "/myPath", null, true);
//
function SetCookie (name, value) {
var argv = SetCookie.arguments;
var argc = SetCookie.arguments.length;
var expires = (argc > 2) ? argv[2] : null;
var path = (argc > 3) ? argv[3] : null;
var domain = (argc > 4) ? argv[4] : null;
var secure = (argc > 5) ? argv[5] : false;
document.cookie = name + "=" + escape (value) +
((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
((path == null) ? "" : ("; path=" + path)) +
((domain == null) ? "" : ("; domain=" + domain)) +
((secure == true) ? "; secure" : "");
}
// Function to delete a cookie. (Sets expiration date to current date/time)
// name - String object containing the cookie name
//
function DeleteCookie (name) {
var exp = new Date();
exp.setTime (exp.getTime() - 1); // This cookie is history
var cval = GetCookie (name);
document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
}
var numEyes = 4;
var numNoses = 4;
var numMouths = 4;
function loadFace() {
var eye = GetCookie("eye");
if ((eye == null) || (eye == "")) { eye = "eye1.gif"; }
parent.eye.location = eye;
var nose = GetCookie("nose");
if ((nose == null) || (nose == "")) { nose = "nose1.gif"; }
parent.nose.location = nose;
var mouth = GetCookie("mouth");
if ((mouth == null) || (mouth == "")) { mouth = "mouth1.gif"; }
parent.mouth.location = mouth;
}
// STOP HIDING -->
</SCRIPT>
</HEAD>
<FRAMESET ROWS="150,150,150,*" onLoad="loadFace();">
<FRAMESET COLS="400,*">
<FRAME SRC="blank.htm" NAME="eye" MARGINHEIGHT=0 MARGINWIDTH=0 SCROLLING="no">
<FRAME SRC="eyes.htm" MARGINHEIGHT=0 MARGINWIDTH=0 SCROLLING="auto">
</FRAMESET>
<FRAMESET COLS="400,*">
<FRAME SRC="blank.htm" NAME="nose" MARGINHEIGHT=0 MARGINWIDTH=0 SCROLLING="no">
<FRAME SRC="noses.htm" MARGINHEIGHT=0 MARGINWIDTH=0 SCROLLING="auto">
</FRAMESET>
<FRAMESET COLS="400,*">
<FRAME SRC="blank.htm" NAME="mouth" MARGINHEIGHT=0 MARGINWIDTH=0 SCROLLING="no">
<FRAME SRC="mouths.htm" MARGINHEIGHT=0 MARGINWIDTH=0 SCROLLING="no">
</FRAMESET>
<FRAME SRC="build.htm">
<SCRIPT LANGUAGE="JavaScript">
<!-- HIDE FROM OTHER BROWSERS
// STOP HIDING -->
</SCRIPT>
</FRAMESET>
Input
<!-- SOURCE CODE FOR build.html -->
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- HIDE FROM OTHER BROWSERS
//
// Cookie Functions - Second Helping (21-Jan-96)
// Written by: Bill Dortch, hIdaho Design <bdortch@netw.com>
// The following functions are released to the public domain.
//
//
// "Internal" function to return the decoded value of a cookie
//
function getCookieVal (offset) {
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}
//
// Function to return the value of the cookie specified by "name".
// name - String object containing the cookie name.
// returns - String object containing the cookie value, or null if
// the cookie does not exist.
//
function GetCookie (name) {
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return getCookieVal (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) break;
}
return null;
}
//
// Function to create or update a cookie.
// name - String object object containing the cookie name.
// value - String object containing the cookie value. May contain
// any valid string characters.
// [expires] - Date object containing the expiration data of the cookie. If
// omitted or null, expires the cookie at the end of the current session.
// [path] - String object indicating the path for which the cookie is valid.
// If omitted or null, uses the path of the calling document.
// [domain] - String object indicating the domain for which the cookie is
// valid. If omitted or null, uses the domain of the calling document.
// [secure] - Boolean (true/false) value indicating whether cookie transmission
// requires a secure channel (HTTPS).
//
// The first two parameters are required. The others, if supplied, must
// be passed in the order listed above. To omit an unused optional field,
// use null as a place holder. For example, to call SetCookie using name,
// value and path, you would code:
//
// SetCookie ("myCookieName", "myCookieValue", null, "/");
//
// Note that trailing omitted parameters do not require a placeholder.
//
// To set a secure cookie for path "/myPath", that expires after the
// current session, you might code:
//
// SetCookie (myCookieVar, cookieValueVar, null, "/myPath", null, true);
//
function SetCookie (name, value) {
var argv = SetCookie.arguments;
var argc = SetCookie.arguments.length;
var expires = (argc > 2) ? argv[2] : null;
var path = (argc > 3) ? argv[3] : null;
var domain = (argc > 4) ? argv[4] : null;
var secure = (argc > 5) ? argv[5] : false;
document.cookie = name + "=" + escape (value) +
((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
((path == null) ? "" : ("; path=" + path)) +
((domain == null) ? "" : ("; domain=" + domain)) +
((secure == true) ? "; secure" : "");
}
// Function to delete a cookie. (Sets expiration date to current date/time)
// name - String object containing the cookie name
//
function DeleteCookie (name) {
var exp = new Date();
exp.setTime (exp.getTime() - 1); // This cookie is history
var cval = GetCookie (name);
document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
}
var windowNumber = 1;
function buildFace() {
var eye = parent.eye.location;
var nose = parent.nose.location;
var mouth = parent.mouth.location;
var face = window.open("","builtFace" + windowNumber ++,"width=400,height=450");
face.document.open("text/html");
face.document.write('<IMG SRC="' + eye + '">');
face.document.write('<IMG SRC="' + nose + '">');
face.document.write('<IMG SRC="' + mouth + '">');
face.document.close();
}
function randomFace() {
var eye = "eye" + getRandom(parent.numEyes) + ".gif";
var nose = "nose" + getRandom(parent.numNoses) + ".gif";
var mouth = "mouth" + getRandom(parent.numMouths) + ".gif";
parent.eye.location = eye;
parent.nose.location = nose;
parent.mouth.location = mouth;
}
function getRandom(num) {
today = new Date();
var bigNumber = today.getSeconds() * today.getTime() * Math.sqrt(today.getMinutes());
var randomNum = Math.floor(bigNumber % num);
return randomNum + 1;
}
function saveFace() {
var eye = parent["eye"].location;
var nose = parent["nose"].location;
var mouth = parent["mouth"].location;
var expiry = new Date;
expiry.setTime(expiry.getTime() + 365*24*60*60*1000);
SetCookie("eye",eye,expiry,"/");
SetCookie("nose",nose,expiry,"/");
SetCookie("mouth",mouth,expiry,"/");
}
// STOP HIDING -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#000000" TEXT="iceblue">
<FORM METHOD=POST>
<CENTER>
<INPUT TYPE="button" VALUE="Build This Face" onClick="buildFace();">
<INPUT TYPE="button" VALUE="Make A Random Face" onClick="randomFace();">
<INPUT TYPE="button" VALUE="Save This Face" onClick="saveFace();">
</CENTER>
</FORM>
</BODY>
You may also want to extend the form in build.html to add a button to load a saved face:
<INPUT TYPE="button" VALUE="Load Saved Face" onClick="parent.loadFace();">