frameSet1.html (Side-by-side frames)
This is the simplest case.
There is a left frame and a right frame.
Here is the HTML in frameSet1.html
that defines the frameset.
<frameset cols="30%,70%"> <frame src = "left.html" name = "left"> <frame src = "right.html" name = "right"> </frameset>
<body>
element.
Each frame is given a name and a page to load into the frame.
frameSet2.html (Side-by-side frames)
This is similar to the first example except the left
frame is a table of links.
When a link is clicked the corresponding page is loaded into the
right frame.
Here is the HTML in frameSet2.html
that defines the frameset.
<frameset cols="15%,70%"> <frame src = "links.html" name = "links"> <frame src = "content.html" name = "content"> </frameset>
links.html
will contain thepage of links and
the default page content.html
in the right frame will be
replaced by a new page when a link is clicked.
Here is the body of links.html
<a href="http://www.cnn.com" target = "content">CNN</a> <p> <a href="http://www.canoe.ca" target = "content">Canoe</a> <p> <a href="http://www.javascript.com" target = "content">JavaScript site</a>
target
attribute is used to specify which frame in the
frameset will be loaded with the page.
frameSet3.html (frames within frames)
This example shows that a frame set can be nested inside another frame set.
Here there is a top frame a middle frame and a bottom frame.
The middle frame is divided into two side-by-side frames.
Here is the HTML in frameSet3.html
that defines the frameset.
<frameset rows="10%,*,10%"> <frame src = "top.html" name = "links" scrolling = no> <frameset cols="10%,*"> <frame src = "left.html" name = "left"> <frame src = "right.html" name = "right"> </frameset> <frame src = "bottom.html" name = "bottom" scrolling = no> </frameset>
scrolling
attribute can be
used to prevent a frame from scrolling. No scroll bars will appear.
There are several other attributes for the frame and frameset elements
(see HTML documentation).
frameSet4.html (mouse over links)
In the frameSet2 example it is necessary to click on the links in the
links.html
page. We can rewrite this example using JavaScript
so that it is only necessary to move the mouse over the link in order to follow it.
Here is the HTML in frameSet4.html
that defines the frameset.
<frameset rows="10%,*,10%"> <frame src = "top.html" name = "links" scrolling = no> <frameset cols="10%,*"> <frame src = "left2.html" name = "left"> <frame src = "right.html" name = "right"> </frameset> <frame src = "bottom.html" name = "bottom" scrolling = no> </frameset>
links2.html
file
<a href="#" onMouseOver="goTo('http://www.cnn.com')">CNN</a> <p> <a href="#" onMouseOver="goTo('http://www.canoe.ca')">Canoe</a> <p> <a href="#" onMouseOver="goTo('http://www.javascript.com')">JavaScript site</a>
goTo
function in the head is given by
function goTo(theUrl) { parent.content.location = theUrl; }
The file quizFrames.html contains a frame set with two frames:
<frameset cols="100%,*"> <frame src = "page1.html" name = "page" noresize> <frame src = "statistics.html" name = "statistics" noresize> </frameset>
The right frame is statistics.html and it is hidden because it has zero width. It should be given a name that a user cannot guess (like a password) since it contains arrays with he correct answer and the user answer for each question.