JavaScript and Frames, Part II: The Frames - www.docjavascript.com | WebReference

JavaScript and Frames, Part II: The Frames - www.docjavascript.com


JavaScript and Frames, Part II (8)

The Frames

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 </title>
<SCRIPT language="JavaScript">
<!--
function handleClick() {
  top.findClickedBox(self);
}
// -->
</SCRIPT>
</HEAD>
<BODY>
  <A HREF="javascript:void(0)" onClick="handleClick()">
  <IMG SRC="doc50x50.gif" WIDTH="50" HEIGHT="50" BORDER="0"></A>
</BODY>
</HTML>

The image we display by default is doc50x50.gif. We void the link's action because we want to enforce the click action alone. Mouse clicking the box is handled, as explained earlier this column, 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.


http://www.internet.com

Produced by Yehuda Shiran and Tomer Shiran

Created: April 5, 1999
Revised: April 5, 1999

URL: http://www.webreference.com/js/column37/frames.html