4.2 Mixing HTML and VRML Frames

By using frames you can create interesting mixed VRML/HTML documents like the Tenochtitlan Web Site we already mentioned. However make sure that a simple <embed>ed VRML browser window won't do the trick, because simple HTML pages are easier to bookmark. [Note: we have to look into combining the <embed> tag with frames].

You can learn about frames in several places, for Netscape you can check out the THE Netscape Frames Tutorial. Here we just present two simple examples.

4.2.1 VRML scenes library

Image that you'd like to build a libary of the VRML scenes you built. You would like to (a) display your files, (b) let the user display the scene in a different frame and (c) and let him look at the code in a still different frame.

    *********************************************
    *                         *                 *
    * Source Code Frame:      *                 *
    * src=frame-1-source.html *                 *
    * name=source             *  Contents Frame:*
    *                         *                 *
    *                         *  src=..         *
    ***************************  name=contents  *
    *                         *                 *
    * VRML Frame:             *                 *
    * src=frame-1-vrml.html   *                 *
    * name=vrml               *                 *
    *                         *                 *
    *                         *                 *
    *********************************************

Please have a look at the example to ``see it for real''.

Example 4.2.1 VRML in a Frame

HTML:

../examples/frames/frame-1.html

Here is the contents of the Main page (frame-1.html):

<HTML>
<HEAD>
<TITLE>Embedded VRML Frame ( 7-Mar-1997)</TITLE>
<!-- Changed by: D.K.S.,  7-Mar-1997 -->
</HEAD>
<FRAMESET COLS = "75%, *">
  <FRAMESET ROWS = "40%, *">
     <FRAME SRC="frame-1-source.html" name="source" scrolling="auto"
      Frameborder="yes" border="3">
     <FRAME SRC="frame-1-vrml.html" name="vrml" scrolling="auto"
      Frameborder="yes" border="3">
  </FRAMESET>
  <FRAME SRC="frame-1-contents.html" name="contents" scrolling="auto"
   Frameborder="yes" border="3">

</FRAMESET>
</HTML>

The contents of the files frame-1-source.html and frame-1-vrml.html does not matter since they will be replaced anyhow by either code listing or your VRML plug-in.

Now, all you need to do in order to display a link in frame-1-contens.html in the right frame is to use a ``TARGET'' field in the ``A HREF'' tag as in the following example:

<HTML>
<HEAD>
<TITLE>Contents ( 7-Mar-1997)</TITLE>
<!-- Changed by: D.K.S.,  7-Mar-1997 -->

</HEAD>
<BODY>
<H1>Contents</H1>

<a href="anim-move-1.text" target="source">anim-move-1.text</a><br>
<a href="anim-move-1.wrl" target="vrml">anim-move-1.wrl</a><p>

..... and so on

<a href="anim-touch-3.text" target="source">anim-touch-3.text</a><br>
<a href="anim-touch-3.wrl" target="vrml">anim-touch-3.wrl</a><p>
<hr>
Use the BACK button of your www browser to get back from where you came
in the <A HREF="/guides/vrml/vrmlman/vrmlman.html">VRML Primer</A>.
<hr>
</BODY>
</HTML>

4.2.2 VRML to HTML in a frame

You can use the same kind of technology to display a HTML page in a frame when you click on a VRML anchor. (see section 1.2.6).

Example 4.2.2 VRML in a Frame II

HTML:

../examples/frames/frame-2.html

The definition of the frame is almost the same:

<HTML>
<HEAD>
<TITLE>Embedded VRML Frame ( 7-Mar-1997)</TITLE>
</HEAD>
<FRAMESET COLS = "75%, *">
  <FRAMESET ROWS = "50%, *">
     <FRAME SRC="frame-2-contents.html" name="contents" scrolling="auto"
      Frameborder="yes" border="3">
     <FRAME SRC="frame-2-vrml.wrl" name="vrml" scrolling="auto"
      Frameborder="yes" border="3">
  </FRAMESET>
     <FRAME SRC="frame-2-explanation.html" name="explanation" scrolling="auto"
      Frameborder="yes" border="3">
</FRAMESET>
</HTML>

Now let's see how we tell the VRML plug-in to display links in another frame:

                 # LEVEL II: The bunch as a whole
                 Anchor {
                    url "http://tecfa.unige.ch/tecfa-people/tecfa-people.html"
                    description "A link to Tecfa People"
                    parameter "target=contents"
                    children [
                       Transform { .......

The code for this example is exactly the same as for the LOD example in section 3.2 on page

, except for the parameter field.

Next: 4.3 VRML code generation Up: 4. Mixing HTML with Previous: 4.1 Introduction

D.K.S. - 1998-03-18