Frames refers to a special web authoring technique which allows you to break the browser's window into several rectangles or frames. Each frame can contain a separate web page. Also, you can write your HTML so that clicking on a hyperlink in one frame will load a new web page in a different frame. Many web authors will use one frame as an index or menu to web pages that get loaded into another frame. Using a QTVR movie, it is possible to create hot spots that will load web pages into a different frame, making the QTVR movie itself a kind of interface to access information that gets loaded into the frame.
Frame scripting is a somewhat advanced HTML technique. This tutorial will show you just enough of frame scripting to demostrate how it works with QTVR movie hot spots. Consult another reference on web authoring to learn more about creating frame-based web sites. The web tutorial So You Want to Make a Web Page? does a particulary good job explaining how frames work.
A Frames Web Page with a QTVR Movie
The picture above shows how a simple frames page looks like. This page uses 3 HTML files at once. One HTML document uses the <FRAMESET> and <FRAME> tags to create the frames of the web page. Two other HTML files are loaded into the two frames created by the first file. Click on the picture to see what the page looks like.
The Same Frames Page after Clicking on a Hot Spot
If you click on one of the hot spots in the QTVR panorama in the left frame, a new web page will load into the frame on the right. In this way, you can use a QTVR movie as a graphic interface to a great deal of information that gets displayed in the right frame. Remember, you can put up to 254 hot spots on a given QTVR Movie! Go back to the frames page and give it a try.
The HTML file that creates the frames is fairly short. Here is the HTML that does the job in the example above:
<FRAMESET COLS="340,*">
<FRAME SRC="Pano.htm" SCROLLING=NO>
<FRAME SRC="FrBegin.htm" NAME="hotframe">
</FRAMESET>
This is all that goes in the body of the HTML file for this example. The FRAMESET tag takes a parameter COLS, which is given the value "340,*". COLS is describing how the web page will be divided into two columns comprising the two vertical frames of the page. "340,*" is saying there are two columns, the first is 340 pixels wide and the second takes up what is remaining of the width of the browser window. There are several ways of specifying how the width will be divided between the frames. If we had COLS="60%,40%", then the full width of the browser window would be divided between the two frames, the first getting 60% and the second getting 40% of the width. You can also divide a web page into horizonal frames by using a ROWS parameter instead of COLS.
The two FRAME tags that fall between the <FRAMESET> and </FRAMESET> tags specify what will go into the two frames, in order, left to right. In the first FRAME tag, the parameter SRC="Pano.htm" is telling the browser to put the HTML file Pano.htm in the first frame. The SCROLLING=NO tag suppresses drawing of a scroll bar for that frame. The second FRAME tag specifies that the HTML file FrBegin.htm will be loaded in the second frame. The NAME="hotframe" gives the second frame a name that will be used later by the TARGET parameter to load new web pages into the second frame. Warning! Apparently, names given in the NAME parameter need to be all lower case letters. This peculiarity isn't discussed in the web authoring books and tutorials I've been reading.
In the file Pano.htm that gets loaded into the first frame has one EMBED tag for the QTVR movie, UTSoMall.mov. The QTVR movie has four hot spots on it that were created in Nodester. In the EMBED tag that follows, the hot spots are used to load new web pages into the second frame, named "hotframe". Here is what it looks like:
<EMBED SRC="Movies/UTSoMall.mov" HEIGHT=256 WIDTH=320 CONTROLLER=TRUE
HOTSPOT1="../Washington.htm" TARGET1="hotframe"
HOTSPOT2="../Tower.htm" TARGET2="hotframe"
HOTSPOT3="../Littlefield.htm" TARGET3="hotframe"
HOTSPOT4="../Capitol.htm" TARGET4="hotframe"></EMBED>
It isn't required, but I decided to use the CONTROLLER=TRUE
parameter, so that visitors to my web page can use the controller bar to help
them find the hot spots. What is different here is the four HOTSPOT and TARGET
parameters. HOTSPOT1="../Washington.htm" determines
what the browser will load when the hot spot assigned the number 1 gets clicked.
(The hot spot numbers get assigned by the software you use to create the QTVR
movie, Nodester in this case.) In this case it is the file Washington.htm. Notice!
The file that gets loaded by the browser is relative to the QTVR movie UTSoMall.mov
in the "Movies" folder, NOT the HTML file! Using relative addressing, the value
to the HOTSPOT1 parameter includes "../", meaning, look in the
"parent" folder of "Movies" to find "Washington.htm".
The TARGET1="hotframe" parameter matches the HOTSPOT1 parameter in that it refers to the hot spot number 1. Its value "hotframe" refers to the frame named "hotframe", assigned by the NAME parameter in the FRAME tag of the HTML document that created the frames, as described above. Again, take care that the name is all lower case letters. TARGET1 is telling the browser to load the file given in HOTSPOT1 into the frame "hotframe".
The remaining HOTSPOT and TARGET parameters are
specifying similar actions, all causing new HTML files to be loaded into the
second frame, named "hotframe". That's all there is to it! If you want, go
back to the QTVR Frames page and try it out again.
