|
|
 |
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.
People who read this tip also read these tips:
Look for similar tips by subject:
|
