Opening Panoramas in a Separate Window

This document describes the HTML and JavaScript magic necessary to create a hyperlink that then displays a panorama in a separate window of a given size.

Step 1: Add JavaScript to open a window

First, create a JavaScript function that opens a window. Add the following to your HTML document, just before the <BODY> element:

<!--NOEDIT-->
<SCRIPT LANGUAGE="JavaScript">
function openWindow() {
  window.open("","windowname","width=400,height=250,resizable=yes,toolbar=no,location=no,directories=no,status=yrd,menubar=no,scrollbars=no");
}
</SCRIPT>
<!--/NOEDIT-->

The  lines are not strictly necessary, but are HTML comments that might prevent your HTML editor from messing up the JavaScript code. The "windowname" parameter gives the window a name that you will use later, and can be anything you like. The other parameters ("width=..." etc.) are a mixture of semi-standard and Netscape-specific properties for new windows; it is safe to assume that the width and height parameters will be understood by any JavaScript-capable web browser, but the more esoteric parameters may be ignored by your web browser.

If a window named "windowname" is already opened, the function will do nothing.

Step 2: Add a hyperlink

Use the standard hyperlinking elements (<A HREF="panorama.wrl"> ... </A>) to create an ordinary hyperlink. Before doing anything fancy, test it to be sure that it works (and that it just replaces the HTML page with the panorama). Once it is working, add the following:

Add onclick="openWindow();" inside the <A> element; for example:
<A HREF="http://.../" onclick="openWindow();">click here</A>
This runs the openWindow() JavaScript function that you wrote in step 1 when the user clicks on the hyperlink.

Also add TARGET="windowname" inside the <A> element, for example:
<A HREF="..." onclick="..." TARGET="windowname">click here</A>
This tells the web browser to put the stuff in the HREF url into the window named "windowname", which (if not already opened) will have just been opened by the onclick/openWindow() function. Phew.

Step 3 [optional]: Create HTML for the new window

If you want the panorama to occupy only part of the new window, then you can simply create an HTML page that embeds the panorama, and refer to that HTML page in the <A HREF=".."> parameter. If you are using a Java applet to display panoramas, then you must use this technique, because it is not possible to hyperlink directly to a Java applet.

Useful Tricks

What if you have several panoramas and want to display each of them in a separate window that also contains some HTML code (instructions for navigating the panorama, perhaps, or a description of the panorama)? One way of doing that is to create a separate HTML document for each of the panoramas, and link to those different documents. However, if you have a lot of panoramas that can be very tedious and inconvenient.

A better way is to pass information about which panorama to display into the new window. This can be accomplished with some JavaScript and HTML, as follows:

Append the extra information to the document's URL, using the following format:
<A HREF="http://..../document.html?ExtraInformation">
Write JavaScript code in document.html to interpret the extra information, perhaps dynamically generating part of the web page. The extra information is available in JavaScript as the 'search' part of the 'location' property, and includes the '?' character. So, the JavaScript code to extract a filename would be:
var filename = location.search.substring(1,location.search.length);
For more information about JavaScript programming, see Netscape's developer site. The article "Form-Data Handling in Client-Side JavaScript" demonstrates many more sophisticated techniques for passing information between Web pages using JavaScript and the HTTP GET protocol (which just generates a URL of the form "http://...?parameter1=value1&parameter2=value2&...").

For complete examples of all of these techniques, feel free to take a look at (and borrow) the source to our Demos page.

| Up to the tutorial index | Back to Embedded Panoramas |