Using JavaScript with QTVR Panoramic Movies

Introduction

This tutorial uses the QT 1.1+ plugin, QuickTime 2.12+
(on PC - 2.0+ on Mac) with QTVR components and a
browser that supports the javascript: protocol. Microsoft
Internet Explorer 3.x (Windows) is a notable exception to
this rule - it supports the javascript: protocol but not when
called from within QuickTime.

One of the nice features of QTVR panoramas on the web is the fact
that hotspots can be linked to other URL's. It's possible using the
javascript: protocol to extend the functionality of these hotspots. You
can for example, provide people with additional information about that
particular part of the panorama. Try clicking on the hotspots in the
panorama below.



If you have a supported browser and everything is installed properly you
should get a alert box telling you what you have just clicked on.

Now here's the html for it:

<EMBED src="qtvr.mov" height=200 width=300 cache=true tilt=-45 pan=-45 HOTSPOT100="javascript:alert('Goblin')" HOTSPOT101="javascript:alert('Gravel')" HOTSPOT102="javascript:alert('Cross')" HOTSPOT103="javascript:alert('zombie')" HOTSPOT104="javascript:alert('gravel')" HOTSPOT105="javascript:alert('flowers')" HOTSPOT106="javascript:alert('window')" HOTSPOT107="javascript:alert('flowers')" HOTSPOT108="javascript:alert('urn')" HOTSPOT109="javascript:alert('urn')">

Breaking it down line by line.

src="qtvr.mov" - this is the location of the quicktimevr.
height=200 - the height of the qtvr.
width=300 -the width of the qtvr.
cache=true - caches the movie to the viewer's drive.
tilt=-45 -the vertical tilt or pitch of the viewing angle.
pan=-45 - the horizontal pan or heading.

Now the hotspots. Here's the first:

HOTSPOT100="javascript:alert('Goblin')"

Which has the general pattern :

HOTSPOT <number> = "URL"

Normally the URL tag would contain an address but in this case the http:
protocol has been substituted for the javascript: one. A JavaScript command
"alert()" and the text to display in the alert box in this case - 'Goblin'. The careful
use of single ' and double " quotes is deliberate. JavaScript is fussy about mixing
these. The rest of the lines follow the same pattern.

You can, of course, use other commands other than alert and even call
other functions declared elsewhere. An I Spy game demonstrates this.

< QTVR Tutorial site contents >