April 11, 2000 - Using Frames in a Memory Game Board

Yehuda Shiran April 11, 2000
Using Frames in a Memory Game Board
Tips: April 2000

Yehuda Shiran, Ph.D.
Doc JavaScript

We have three level of frames in our script. At the top level, we have a frameset of eight columns:

<FRAMESET COLS="50, 50, 50, 50, 50, 50, 50, 50" FRAMEBORDER="no" FRAMESPACING="1"> 
  <FRAME SRC="column.html" NAME="column0" SCROLLING="no" MARGINHEIGHT="1" MARGINWIDTH="1">
  <FRAME SRC="column.html" NAME="column1" SCROLLING="no" MARGINHEIGHT="1" MARGINWIDTH="1">
  <FRAME SRC="column.html" NAME="column2" SCROLLING="no" MARGINHEIGHT="1" MARGINWIDTH="1">
  <FRAME SRC="column.html" NAME="column3" SCROLLING="no" MARGINHEIGHT="1" MARGINWIDTH="1">
  <FRAME SRC="column.html" NAME="column4" SCROLLING="no" MARGINHEIGHT="1" MARGINWIDTH="1">
  <FRAME SRC="column.html" NAME="column5" SCROLLING="no" MARGINHEIGHT="1" MARGINWIDTH="1">
  <FRAME SRC="column.html" NAME="column6" SCROLLING="no" MARGINHEIGHT="1" MARGINWIDTH="1">
  <FRAME SRC="column.html" NAME="column7" SCROLLING="no" MARGINHEIGHT="1" MARGINWIDTH="1">
</FRAMESET>

Each column frame includes eight box frames:

<FRAMESET rows="50, 50, 50, 50, 50, 50, 50, 50" FRAMEBORDER="no" FRAMESPACING="1"> 
  <FRAME SRC="box.html" NAME="row0" SCROLLING="NO" MARGINHEIGHT="1" MARGINWIDTH="1">
  <FRAME SRC="box.html" NAME="row1" SCROLLING="no" MARGINHEIGHT="1" MARGINWIDTH="1">
  <FRAME SRC="box.html" NAME="row2" SCROLLING="no" MARGINHEIGHT="1" MARGINWIDTH="1">
  <FRAME SRC="box.html" NAME="row3" SCROLLING="no" MARGINHEIGHT="1" MARGINWIDTH="1">
  <FRAME SRC="box.html" NAME="row4" SCROLLING="no" MARGINHEIGHT="1" MARGINWIDTH="1">
  <FRAME SRC="box.html" NAME="row5" SCROLLING="no" MARGINHEIGHT="1" MARGINWIDTH="1">
  <FRAME SRC="box.html" NAME="row6" SCROLLING="no" MARGINHEIGHT="1" MARGINWIDTH="1">
  <FRAME SRC="box.html" NAME="row7" SCROLLING="no" MARGINHEIGHT="1" MARGINWIDTH="1">
</FRAMESET>

The box frame includes a single image:

<HTML>
<HEAD>
<TITLE> memory game box 
<SCRIPT language="JavaScript">
</SCRIPT>
</HEAD>
<BODY>
  <A HREF="javascript:void(0)" onClick="handleClick()">
  <IMG SRC="doc50x50.gif" WIDTH="50" HEIGHT="50" BORDER="0"></A>
</BODY>
</HTML>

We void the link's action because we want to enforce the click action alone. Mouse clicking the box is handled, by the handleClick() function. It calls top.findClickedBox() function from the top level frame with the self object as a parameter. The self object is unique to every frame and is used by the top frame to locate the clicked frame.

Learn more about frame usage in Column 37, JavaScript and Frames, Part II.