HTML and CSS Reference
In-Depth Information
selection of links, then it can serve as a navigation bar. When the user clicks a link, the
page at that URL will be loaded into the main frame.
In Example 10.16 the frames are defined for two frames. Example 10.17 displays the
content of the two frame files. The left frame will represent a menu of links. The back-
ground color in the right frame will change when the user clicks a link in the left frame.
EXAMPLE
10.16
<html>
<head><title>Frame Me!</title></head>
<!--
Creating the framesets for two frames
-->
<!-
-
This HTML file is named: framedef.html
-->
1
<frameset cols="25%,75%">
2
<frame src="leftmenu.html"
name=lframe>
3
<frame src="rightcolor.html" name=rframe>
4
</frameset>
</html>
EXPLANATION
1
The HTML
<frameset>
tag replaces the
<body>
tag when working with frames. The
size is determined by the
ROWS
and
COLS
attributes of the
<frameset>
tag. In this
example, the first frame will occupy 25 percent of the window, and the second
frame will occupy 75 percent of the window (in columns). The default is to set
ROWS
and
COLS
in pixels. (
ROWS
and
COLS
are not case sensitive.)
2
The first frame, named
lframe
occupies 25 percent of the left side of the window.
Its content is in an
src
file called
leftmenu.html
.
3
This frame, called
rframe
, occupies 75 percent of the right side of the window. Its
content is in an
src
file called
rightcolor.html
.
4
The HTML
</frameset>
tag ends the definition of the frames.
EXAMPLE
10.17
<html>
<head><title>Left Frame</title>
<!-
-
This HTML file is named: leftmenu.html
-->
<script type="text/javascript">
1
function setBgColor(color){
2
parent.frames[1].document.bgColor=color;
//
Or use the frame's name: parent.rframe.document.bgColor
}
</script>
</head>
Continues
