Panorado-Applet 2.2

- Technische Referenz

 

Die Dokumentation erfordert etwas Grundkenntnisse in HTML und JavaScript. Sie können diesen Teil auch überspringen und sich gleich die Beispielseiten ansehen. Den Code dazu können Sie direkt kopieren und mit geringen Anpassungen in Ihr Projekt übernehmen.

Übersicht Panorado-Applet    

Empfehlungen

Bringen Sie einen kurzen Hinweis auf die Möglichkeit zur interaktiven Steuerung mit der Maus!

Für Panoramabilder probieren Sie am besten erst mal folgende Einstellungen:
Sphärische Projektion <param name="projection" value="spherical"> .
Breite des Applets: Nicht mehr als ca. 800 Pixel.
Breite des Originalbildes: Bei einem 360°-Bild ca. die dreifacher Breite des Applets, bei kleinerem Winkel entsprechend weniger.
Anfänglichen Maßstab: 100% (Default).

Für Bilder mit "normalem" Blickwinkel wird flache Projektion empfohlen (das ist die Standard-Einstellung).
Zeigen Sie zunächst das ganze Bild verkleinert an: <param name="startscale" value="0">.
Fordern Sie den Benutzer auf, interaktiv hineinzoomen.

Bitte beachten Sie auch, dass große Bilder ggfs. langsam über das Internet übertragen werden und im Speicher ein Vielfaches der Dateigröße an Platz beanspruchen.

 

Das <applet>-Element und seine Attribute

Innerhalb des HTML-Quellcodes einer Seite wird das panorado-Applet durch ein <applet>-Element beschrieben. Dieses Element kann an fast beliebiger Stelle innerhalb des <body>-Abschnitts stehen.

Die Attribute des <applet>-Elements bedeuten Folgendes:

name Über diesen Namen kann auf das Applet-Objekt dynamisch zugegriffen werden (empfohlen).
code Der Name der Applet-Klasse: "Panorado.class".
archive Der Name der Archivdatei, die den Applet-Code enthält: Panorado.jar.
codebase Das Verzeichnis der Archivdatei, falls diese sich nicht im Verzeichnis des aufrufenden HTML-Dokuments befindet (optional).
width Die Breite des Applets in HTML-üblichen Größeneinheiten (obligatorisch).
height Die Höhe des Applets in HTML-üblichen Größeneinheiten (obligatorisch).


Ein Beispiel für eine Minimal-Konfiguration:

<html>
<body>

<applet name="Viewer" code="Panorado.class" archive="Panorado.jar"
width="600px" height="400px">
   <param name="img" value="YourPano.jpg">
   <!--... more parameters... -->
</applet>

</body>
</html>

Erläuterungen zum Beispiel:

Das archive-Attribut des <applet>-Elements verweist auf den Ort, von dem das Applet selbst geladen werden soll. Im Falle von panorado ist dies eine Datei namens Panorado.jar.

Falls diese Datei nicht im selben Ordner wie das umgebende HTML-Dokument steht, muss zusätzlich im codebase-Atttribut der Pfad zu dieser Datei (absolut oder relativ) angegeben werden.

Die Attribute width und height sind obligatorisch. Sie beschreiben die Anzeigefläche des Applets. Anstelle von Pixel-Einheiten können Sie auch %-Einheiten angeben. In diesem Fall können Sie die Größe des Applets über die Größe des umgebenden Browser-Fensters zur Laufzeit verändern! (Einschränkungen)

Das im <applet>-Element enthaltene <param>-Element gibt die zu ladende Bilddatei an (s. u.)

 

Die <param>-Elemente

Das <applet>-Element kann mehrere <param>-Elemente enthalten, mit denen das Verhalten des Viewers näher beschrieben wird. Jedes <param>-Element enthält die Attribute name und value.

Folgende Parameter in der Form
<param name="ParamName" value="ParamValue"> sind möglich:

img Pfad der Image-Quelldatei, relativ zum Verzeichnis des aufrufenden Dokuments. Dateiformat: JPEG, GIF oder PNG.
Die Bilddatei muss aus Sicherheitsgründen vom selben Server wie das aufrufende Dokument oder das aufrufende Applet kommen.
Sie können den Parameter weglassen - in diesem Fall wir das Applet "leer" geladen. JavaScript kann mit der setImage-Methode eine Bilddatei laden.
title Bildbeschreibung in benutzerfreundlicher Form. Wird beim Laden des Bildes angezeigt.
JavaScript erhält den Text durch Aufruf der getTitle()-Methode.
projection Projektionsart: "fast", "flat" oder "spherical"; Default: "fast".
  • fast - für schnelle Bewegungen auch bei großem Bildausschnitt; geringer Speicherbedarf
  • flat - mit Kantenglättung und Überblendeffekt; etwas langsamer
  • spherical - mit 3D-Darstellung
JavaScript erhält die Projektionsart durch Aufruf der getProjection()-Methode.
horzangle Gesamtbreite des Ursprungsbildes, in Grad.
0 .. 360. Default: 360 (bei 360: nahtlos). Daraus ergibt sich auch der Gesamt-Vertikalwinkel des Bildes.
JavaScript erhält den Bildwinkel durch Aufruf der getHorzFov()- bzw. getVertFov()-Methode.
startpan Anfängliche Blickrichtung (Horizontalwinkel, in Grad).
0 .. 360. Default: wie horzangle.
starttilt Anfängliche Blickrichtung (Vertikalwinkel, in Grad).
-90 .. +90. Default: 0
startpanspeed Horizontale Anfangsgeschwindigkeit, in Grad/Sekunde.
> 0 heißt "im Uhrzeigersinn". Default: 3.
starttiltspeed Vertikale Anfangsgeschwindigkeit, in Grad/Sekunde.
> 0 heißt "nach oben". Default: 0
startscale Anfänglicher Zoomfaktor (1.0 = 100%; 0 = optimal eingepasst).
minscale..maxscale. Default: 1.0
compass Kompass-Skala am unteren Rand anzeigen.
yes | no. Default: no
compassnorth Kompass-Nord, relativ zum linken Bildrand, in Grad.
0 ..360. Default: 0
minscale Kleinster zulässiger Zoomfaktor (1.0 = 100%).
0.125 .. 8.0. Default: 0.125
maxscale Größter zulässiger Zoomfaktor (1.0 = 100%).
0.125 .. 8.0. Default: 8.0
enabled Verfügbarkeit von Maus- & Tastatursteuerung.
'yes' | 'no'. Default: 'yes'
mousemodes Klicken & Ziehen verschiebt entweder das Sichtfenster vor dem Bild (pan) oder das Bild hinter dem Sichtfenster (grab).
Falls zwei Modi verfügbar sind, wird mit dem zuerst notierten Modus gestartet.
'pan grab', 'grab pan', 'pan', oder 'grab'. Default: 'pan grab'
mousewheel Zoom-Richtung (Vergrößern oder Verkleinern) beim Drehen des Mausrades nach unten.
'in' | 'out'. Default: 'out'
softpan SoftPan-Feature für glattere Bildbewegungen benutzen.
yes | no. Default: yes
softzoom SoftZoom-Feature für fließendes Zoomen benutzen.
yes | no. Default: yes
tracks Gibt an, ob Track Scripting verwendet werden soll, und ob der Track wiederholt wird. Ist 'once' oder 'repeat' gesetzt, werden die oben beschriebenen Bildparameter (auch 'img') ignoriert, und die Bildparameter werden aus der unten beschriebenen track<nn>-Aufzählung genommen.
'no' | 'once' | 'repeat'. Default: 'no'
track<nn> Beschreibung eines einzelnen Track-Schrittes.
<nn> ist ein aufsteigender Index zwischen 01 und 99.
Die Parameter werden in URL-Parameter-Syntax notiert, die Reihenfolge ist beliebig: par1=val1&par2=val2...
 
  • type=... Entweder 'img', 'line' oder 'curve'.
    track01 startet mit type=img.
Falls type=img gesetzt ist, beschreiben die übrigen Parameter ein neu zu ladendes Bild:
  • img=... Pfad der Image-Quelldatei, relativ zum Verzeichnis des aufrufenden Dokuments. Siehe Beschreibung des img-Parameters.
  • title=... Bildbeschreibung in benutzerfreundlicher Form; optional.
  • projection=... Projektionsart: "fast", "flat" oder "spherical"; Default: "fast".
  • horzangle=... Gesamtbreite des Ursprungsbildes, in Grad.
    0 .. 360. Default: 360.
  • startpan=... Anfängliche Blickrichtung (Horizontalwinkel, in Grad). Default: 0°
  • starttilt=... Anfängliche Blickrichtung (Vertikalwinkel, in Grad). Default: 0°
  • compassnorth=... Kompass-Nord, relativ zum linken Bildrand, in Grad. Default: -1 (=ohne).
Falls type=line oder type=curve gesetzt ist, beschreiben die übrigen Parameter einen Abschnitt des Bewegungspfades:
  • time=... Zeitdauer des Abschnitts (in Millisekunden).
  • pan=... Horizontaler Blickwinkel am Ende des Abschnitts (in Grad).
  • tilt=... Vertikaler Blickwinkel am Ende des Abschnitts (in Grad).
  • scale=... Der Maßstab des Bildes am Ende des Abschnitts.
hotspotsvisible Anfängliche Sichtbarkeit von Hotspots.
'yes' | 'no'. Default: 'no'
hotspotinfoimg Pfad der speziellen Bilddatei für die Darstellung von rein informativen Hotspots, relativ zum Pfad des Dokuments.
Zulässige Pfade: s. Parameter 'img'.
Default: Standard-Symbol. Individuelle Symbole für einzelne Hotspots haben ggfs. Vorrang.
hotspotlinkimg Pfad der speziellen Bilddatei für die Darstellung von Hotspots mit Links, relativ zum Pfad des Dokuments.
Zulässige Pfade: s. Parameter 'img'.
Default: Standard-Symbol. Individuelle Symbole für einzelne Hotspots haben ggfs. Vorrang.
hotspot<nn> Beschreibung eines einzelnen Hotspots.
<nn> ist ein aufsteigender Index zwischen 01 und 99.
Die Parameter werden in URL-Parameter-Syntax notiert, die Reihenfolge ist beliebig: par1=val1&par2=val2...
  • pan=... Horizontalwinkel (in Grad).
  • tilt=... Vertikalwinkel (in Grad).
  • img=... Pfad einer individuellen Bilddatei. Default: Standard-Symbol oder global definiertes Symbol.
  • description=... Benutzerfreundliche Beschreibung, die beim Überfahren des Hotspots angezeigt wird.
  • url=... URL, die beim Klicken auf den Hotspot geladen wird. Das kann auch JavaScript-Code sein; in diesem Fall muss das Applet das Attribut "mayscript" haben.
  • target=... Fenstername für das Ziel. HTML-Angaben wie '_self', '_blank' oder '_top' sind möglich. Sie sollten damit rechnen, dass Popup-Blocker das Öffnen von neuen Fenstern verhindern.
backgroundcolor Hintergrundfarbe rings um das Bild.
HTML-Syntax; z. B. '#222233'. Default: '#000000' (schwarz)
splashimg Pfad der speziellen Bilddatei für die Ladeanzeige.
Zulässige Pfade: s. Parameter 'img'.
splashtext Text für Ladeanzeige (im Bild + in der Statusanzeige).
'$' ist Platzhalter für Prozente.
Default: '$% loaded...'
splashtextposition Position (links, oben) des Ladeanzeige-Textes (pixels).
Default: 10, 20
splashtextfont Schriftart, Schriftgröße (point) des Ladeanzeige-Textes,
z. B. 'SansSerif, 15'.
Schriftarten: SansSerif, Serif, Monospaced, etc.
Default: Systemschriftart
splashtextcolor Farbe des Ladeanzeige-Textes.
Default: '#ffffff' (weiß)
licenseurl URL der Website, für die das Applet lizensiert ist.
Nur erforderlich beim Einsatz auf gewerblichen Websites.
licensekey Registrierschlüssel der Lizenz.
Nur erforderlich beim Einsatz auf gewerblichen Websites.
onloadimage Name einer JavaScript-Event-Handler-Funktion, die aufgerufen wird, sobald ein Bild vollständig geladen ist (optional).
Die JavaScript-Funktion könnte daraufhin beispielsweise Bildeigenschaften vom Viewer abfragen und anzeigen.
onclick Name einer JavaScript-Event-Handler-Funktion, die aufgerufen wird, wenn der Benutzer mit der linken Maustaste auf einen Punkt innerhalb des Viewers klickt (optional).
Diese und die folgenden JavaScript-Handler-Funktionen können verwendet werden, um die aktuellen Mauskoordinaten vom Viewer abfragen und auswerten.
ondoubleclick Name einer JavaScript-Event-Handler-Funktion, die aufgerufen wird, wenn der Benutzer mit der linken Maustaste doppelt auf einen Punkt innerhalb des Viewers klickt (optional).
onmousemove Name einer JavaScript-Event-Handler-Funktion, die aufgerufen wird, wenn der Benutzer den Mauszeiger innerhalb des Viewers bewegt, ohne eine Maustaste zu drücken (optional).
onmousedrag Name einer JavaScript-Event-Handler-Funktion, die aufgerufen wird, wenn der Benutzer den Mauszeiger innerhalb des Viewers bewegt, während die linke Maustaste gedrückt ist (optional).
onimagemove Name einer JavaScript-Event-Handler-Funktion, die aufgerufen wird, wenn die Bildposition oder der Maßstab sich ändert (optional).

 

Die Methoden des Applets

HTML-Seiten können JavaScript-Programmcode enthalten, der auf die einzelnen Elemente der Seite zugreift. JavaScript kann auch ein Applet über dessen Namen ansprechen dessen Methoden aufrufen.

Beispiel:

<applet name="Viewer" ...>...</applet>
<a href="#" onclick="alert(Viewer.getAppletInfo());">Info anzeigen</a>
<a href="#" onclick="Viewer.setScale(2.0);">Maßstab: 200%</a>

Erläuterungen zum Beispiel:

Das Applet erhält den Namen "Viewer".
Beim Klick auf den 1. Link wird ein Info-Text vom Applet abgefragt und angezeigt.
Beim Klick auf den 2. Link wird der Maßstab des Viewers auf 200% gesetzt.

Folgende Methoden des Applets sind über JavaScript-Zugriffe aufrufbar:

String getAppletInfo()

Gibt Versions-, Lizensierungs- und Umgebungs-Informationen zurück.

String[][] getParameterInfo()

Gibt ein 2-dimensionales Text-Array mit Parameter-Informationen zurück. Wird nur von Mozilla-Browsern und einigen HTML-Generatoren unterstützt.

void info()

Öffnet die panorado.com-Website in einem neuen Fenster.

boolean setImage(String strFileName, String strTitle, String strProjection, double horzFov, double startPan, double startTilt, double startPanSpeed, double startTiltSpeed, double startScale, double compassNorth)

Lädt ein neues Bild in den Viewer.
Parameter:
strFileName Pfad der Image-Quelldatei, relativ zum Verzeichnis des aufrufenden Dokuments. Dateiformat: JPEG, GIF oder PNG. Die Bilddatei muss aus Sicherheitsgründen vom selben Server wie das aufrufende Dokument oder das aufrufende Applet kommen.
strTitle Bildbeschreibung in benutzerfreundlicher From. Kann mit getTitle() abgefragt werden.
strProjection Projektionsart, "fast", "flat" oder "spherical". Kann mit getProjection() abgefragt werden.
horzFov Gesamtbreite des Ursprungsbildes, in Grad.
startPan Anfängliche Blickrichtung (Horizontalwinkel, in Grad).
startTilt Anfängliche Blickrichtung (Vertikalwinkel, in Grad).
startPanSpeed Horizontale Anfangsgeschwindigkeit, in Grad/Sekunde. > 0 heißt "im Uhrzeigersinn".
startTiltSpeed Vertikale Anfangsgeschwindigkeit, in Grad/Sekunde. > 0 heißt "nach oben".
startScale Anfänglicher Zoomfaktor (1.0 = 100%; 0 = optimal eingepasst).
compassNorth Kompass-Nord, relativ zum linken Bildrand, in Grad (-1 = kein Kompass).

boolean setImage(String strParams)

Lädt ein neues Bild in den Viewer.
Dies ist eine alternative Syntax für die oben stehende Methode, bei der 1 bis 10 Parameter zu einem Parameter-String in URL-Schreibweise zusammengezogen werden:
Ein Fragezeichen (?), gefolgt von einer Liste einzelner Parameter, die durch &-Zeichen voneinander getrennt sind.
Ein einzelner Parameter hat die Form name=value. Dabei korrespondiert der Name mit einem der <param>-Namen, die die Bildparameter beschreiben.
Beispiel für einen einfachen Parameter-String: Viewer.setImage('?img=../images/YourImage.jpg').

String getTitle()

Gibt den benutzerfreundlichen Namen des Bildes zurück.

String getProjection()

Gibt die Projektionsart des Bildes zurück: "fast", "flat" oder "spherical".

double getImageHorzFov()

Gibt den horizontalen Bildwinkel des Ursprungsbildes (in Grad) zurück.

double getImageVertFov()

Gibt den vertikalen Bildwinkel des Ursprungsbildes (in Grad) zurück.

double getImageWidth()

Gibt die Breite des Ursprungsbildes (in Pixeln) zurück.

double getImageHeight()

Gibt die Höhe des Ursprungsbildes (in Pixeln) zurück.

double getDispHorzFov()

Gibt den horizontalen Bildwinkel des angezeigten Bildausschnitts (in Grad) zurück.

double getDispVertFov()

Gibt den vertikalen Bildwinkel des angezeigten Bildausschnitts (in Grad) zurück.

double getDispWidth()

Gibt die Breite des angezeigten Bildausschnitts (in Pixeln) zurück.

double getDispHeight()

Gibt die Höhe des angezeigten Bildausschnitts (in Pixeln) zurück.

void reset()

Setzt Blickrichtung, Geschwindigkeit und Maßstab des geladenen Bildes auf Startwerte.

void reload()

Änhlich wie reset; lädt aber ein ggfs. geändertes Originalbild nach.

void pan(double pan, double tilt)

Verschiebt den Blickwinkel um die angegebenen Gradwerte.

void panTo(double pan, double tilt)

Setzt den Blickwinkel auf die angegebenen Gradwerte.

void zoom(double scale)

Ändert den Maßstab um den angegebenen Faktor.

void zoomTo(double scale)

Setzt den Maßstab auf den angegebenen Wert (1=100%).

double getScale()

Gibt den aktuellen Maßstab zurück.

void moveTo(double pan, double tilt, double scale)

Setzt den Blickwinkel (Grad) und den Maßstab auf die angegebenen Werte.

double getPan()

Gibt den aktuellen horizontalen Blickwinkel zurück (0...360 Grad; linker Rand=0).

double getTilt()

Gibt den aktuellen vertikalen Blickwinkel zurück (-90...+90 Grad; Horizont=0).

double getMousePan()

Gibt den aktuellen horizontalen Winkel des Mauszeigers zurück (0...360 Grad; linker Rand=0).

double geMousetTilt()

Gibt den aktuellen vertikalen Winkel des Mauszeigers zurück (-90...+90 Grad; Horizont=0).

void setSpeed(double panSpeed, double tiltSpeed)

Setzt die horizontale und vertikale Geschwindigkeit auf die angegebenen Werte.

double getPanSpeed()

Gibt die horizontale Geschwindigkeit zurück.

double getTiltSpeed()

Gibt die vertikale Geschwindigkeit zurück.

void setEnabled(boolean bSet)

Aktiviert oder deaktiviert Maus- und Tastatursteuerung (true=aktiviert, false=deaktiviert)

boolean getEnabled()

Gibt zurück, ob Maus- und Tastatursteuerung aktiviert sind.

void setGrabMode(boolean bSet)

Setzt den aktuellen Mausmodus (true="anfassen", false="bewegen")

boolean getGrabMode()

Gibt den aktuellen Mausmodus zurück.

void setCompass(boolean bShow)

Zeigt oder versteckt die Kompassskala (true="zeigen", false="verstecken").

boolean getCompass()

Gibt zurück, ob die Kompassskala sichtbar ist.

void clearAllTracks()

Löscht alle definierten Track-Schritte.

boolean addTrack(String strParams)

Erzeugt einen neuen Track-Schritt.
Einzelne Parameter werden zu einem Parameter-String in URL-Schreibweise zusammengezogen:
Ein Fragezeichen (?), gefolgt von einer Liste einzelner Parameter, die durch &-Zeichen voneinander getrennt sind. Ein einzelner Parameter hat die Form name=value:
Einzelbeschreibungen finden Sie beim Applet-Parameter track<nn>.

void startTracks()

Startet die Ausführung der durch AddTrack-Aufrufe erzeugten Track-Liste.

void setTracks(String strMode)

Definiert die Verwendung von Tracks. Optionen: "no", "once" oder "repeat".

String getTracks()

Gibt zurück, wie Tracks verwendet werden sollen: "no", "once" oder "repeat".

void clearAllHotspots()

Löscht alle definierten Hotspots.

boolean addHotspot(String strParams)

Erzeugt einen neuen Hotspot.
Einzelne Parameter werden zu einem Parameter-String in URL-Schreibweise zusammengezogen:
Ein Fragezeichen (?), gefolgt von einer Liste einzelner Parameter, die durch &-Zeichen voneinander getrennt sind. Ein einzelner Parameter hat die Form name=value.
Einzelbeschreibungen finden Sie beim Applet-Parameter hotspot<nn>.

void gotoHotspotUrl(int i)

Simuliert den Klick auf den angegebenen Hotspot. i ist ein 0-basierter Index.

void setHotspotImage(String strFileName)

Setzt den Pfad der speziellen Bilddatei für die Darstellung von Hotspots, relativ zum Pfad des Dokuments.

void setHotspotsVisible(boolean bSet)

Zeigt oder versteckt Hotspots (true="zeigen", false="verstecken").

boolean getHotspotsVisible()

Gibt zurück, ob Hotspots sichtbar sind.

 

Ein paar Testergebnisse

Die hier vorgestellte Version wurde auf verschiedenen Versionen von Microsoft Internet Explorer, Netscape, Mozilla Firefox und Opera getestet, unter Java v1.4 und v1.5.

Als Problem stellte sich heraus, dass die Netscape-, Firefox (< 1.5)- und Opera-Browser die dynamische Änderung der Höhe von Applets zur Laufzeit nicht korrekt unterstützen. Falls dieses Feature auf anderen Browsern dennoch gewünscht wird, sollte per JavaScript eine Fallunterscheidung vorgenommen werden - s. a. die Beschreibung der Beispielseite.

Das Applet funktioniert nicht uneingeschränkt bei Java-Versionen vor v1.4, die aber kaum noch verbreitet sind. Es wird empfohlen, einen Hinweis auf die Update-Möglichkeit von Java anzubringen.

Allgemeine Informationen zur Sicherheit von Java-Applets finden Sie auf der Sun Developer Network-Seite im Internet.

Beim Anklicken von Hotspots kann ein Popup-Blocker das Öffnen des Links in einem neuen Fenster verhindern. Das lässt sich nur umgehen, indem der Popup-Blocker zeitweise oder dauerhaft deaktiviert wird.

 

Beispielseiten

Wir möchten Ihnen anhand von drei HTML-Beispielseiten erläutern, wie das Applet integriert werden kann.

Rufen Sie bitte zunächst die erste Seite auf. Hier befindet sich das Applet mitten auf der Seite, umgeben von anderen Textelementen. Mit diesem Applet soll auch nur ein einziges Bild angezeigt werden. Wie Sie weiter unten noch sehen werden, erfordert das lediglich ein <applet>-Element mit ein paar Parametern.

Beim Aufruf der zweiten Seite über einen Link der ersten Seite kommt dann etwas Programmierung ins Spiel. Es wird eine JavaScript-Funktion aufgerufen und dieser Funktion über einen Parameter mitgeteilt, welches Bild auf der zweiten Seite in einem Popup-Fenster erscheinen soll. Die zweite Seite enthält dann wiederum eine JavaScript-Funktion, die diesmal für das Laden des übergebenen Bildes sorgt.
Dieses Prinzip der Programmsteuerung ist für Bildergalerien ideal und lässt sich noch ausweiten und verfeinern. In diese Richtung geht auch die Panorama-Galerie auf dieser Website.

Die dritte Seite ist ein Beispiel für die Verwendung von Hotspots.

Wir empfehlen, dass Sie sich den Quellcode zu den Beispielseiten anzeigen lassen. Sie können diesen ganz oder teilweise kopieren und für Ihre eigenen Seiten verwenden, oder zunächst nur analysieren, wenn Sie über Grundkenntnisse in HTML bzw. JavaScript verfügen. Wir werden den Quellcode nachfolgend kommentieren.

 

Quellcode - erste Beispielseite:

Übergehen Sie zunächst mal das <script>-Element im Header und sehen Sie sich den <body> an.

Dort steht das <applet>-Element mit ein paar <param>-Unterelementen. Das Applet-Attribut name="Viewer" wird weiter unten benutzt, um das Applet über JavaScript anzusprechen. Das Attrbut archive="Panorado.jar" verweist auf die Archivdatei im selben Verzeichnis, die den Applet-Code enthält. Die Attribute width und height sind obligatorsich und enthalten hier feste Pixel-Angaben.

Das panorado-Applet kennt noch weit mehr Parameter als die hier verwendeten. Für nicht gesetzte Parameter werden jeweils Defaultwerte angenommen.

Unterhalb des Applets steht in einer Tabellenzeile ein <img>-Element, das bei einem onclick-Event die info()-Methode des Viewers aufruft.

Hinter dem nächsten <img>-Element verbergen sich sogar eine ganze Reihe von Schaltflächen. Das Attribut usemap="#Buttons" verweist auf das unterhalb der Tabelle stehende <map>-Element. Dessen <area>-Unterelemente verweisen über onclick-Attribute auf Methodenaufrufe des Viewer-Applets wie Viewer.reset() oder Viewer.setSpeed(0,0). Also schon wieder JavaScript!

Die beiden Links am unteren Rand der Seite rufen bereits die zweite Beispielseite als Popup auf. Um das Aussehen des Popup-Fensters genauer zu bestimmen, geschieht das nicht einfach über <a href="...">, sondern indirekt über die JavaScript-Funktion showPano(...), deren Code im Header der Seite steht.

Diese Funktion bestimmt ein paar Fensterparameter, die u. a. von der Bildschirmgröße und dem verwendeten Browser abhängen, und erzeugt ein Popup-Fenster mit dem zweiten Beispieldokument. Beachten Sie, dass die URL hinter dem Namen der HTML-Seite ein Fragezeichen und dann den Dateinamen des anzuzeigenden Bildes enthält. Dieser Dateiname wird dem HTML-Dokument sozusagen als Parameter übergeben.

 

Quellcode - zweite Beispielseite:

Die Seite enthält nicht viel mehr als ein Viewer-Applet und ein paar Steuerelemente, ähnlich wie auf der ersten Beispielseite. Auffällig ist allerdings, dass das <applet>-Element diesmal keine Unterelemente enthält. Der Viewer wird also erst einmal ohne Bild geladen!

Das Bild kommt später, sobald die ganze Seite geladen ist. Dann nämlich erhält das <body>-Element ein onload-Event, was zur Ausführung einer JavaScript-Anweisung führt. Diese extrahiert den Paramter-Teil aus der Dokumenten-URL (s. o.) und übergibt ihn an das Applet - der Viewer erhält sein Bild.

Das wars auch schon fast. Hinzuweisen wäre nur noch auf die Breiten- und Höhenangaben von <table>, <tr> und <applet>, die dafür sorgen, dass bei einer Größenänderung des Popup-Fensters die Applet-Größe angepasst wird.

 

Quellcode - dritte Beispielseite:

Über die Hotspots im Bild lassen sich Textinformationen darstellen. Beim Klicken auf einen Hotspot, dem ein Link zugeordnet ist, wird dieser Link ausgeführt.

Das <applet>-Element enthält einige zusätzliche <param>-Unterelemente:

hotspotsvisible mit dem Wert yes gibt an, dass Hotspots anfänglich sichtbar sein sollen.
Die hotspotNN-Elemente definieren jeweils einen Hotspot mit den zugehörigen Bildkoordinaten (hier in Grad), dem anzuzeigenden Text, der anzuzeigenden URL (optional) und dem Fensternamen für das Ziel (auch optional).

Die Hotspots 01 bis 06 enthalten nur ein Textinfo, die Hotspots 07 bis 10 zusätzlich einen Link auf ein kleines Bild, das im selben Fenster angezeigt werden soll, und der Hotspot 11 eine JavaScript-Anweisung, die eine Meldung in einem Fenster hervorbringt.

Die Elemente zum Ein- und Ausschalten der Hotspots sind diesmal nicht als Image Map, sondern als einfache Textlinks realisert, die eine JavaScript-Funktion aufrufen: javascript:Viewer.setHotspotsVisible(true);

Die Seite zeigt auch ein Beispiel für den Einsatz einer Event-Funktion:
Mit <param name="ondoubleclick" value="onDoubleClick()"> wird eine Event-Handler-Funktion bestimmt, die auf einen Doppelklick vom Applet die aktuellen Mauskoordinaten abfragt und in einem HTML-Element anzeigt - praktischerweise im Format für die Definition eines neuen Hotspots.

 

Maus- und Tastatursteuerung

Wenn der Eingabefocus durch Klicken mit der Maus auf das Applet gesetzt ist, kann es folgendermaßen gesteuert werden:

Mit der Maus:

Linke Maustaste
drücken & ziehen		 Verschiebt den Bildausschnitt.
Mittlere Maustaste
bzw. Mausrad drücken		 Zeigt den maximalen Bildausschnitt.
Mausrad drehen Zoomt (+/-).

Mit der Tastatur:

F5 Startet das Bild neu.
F4 Schaltet um zwischen Maus-Funktionsarten.
1 Setzt den Maßstab auf 100%.
2 Setzt den Maßstab auf 200%.
5 Setzt den Maßstab auf 50%.
A Zeigt den maximalen Bildausschnitt.
+/- Zoomt (Vergrößert/Verkleinert).
Cursortasten Verschiebt den Bildauschnitt.
Umschalt+Cursortasten Bewegt den Bildauschnitt gleichmäßig.
Escape Stoppt die Bildbewegung.
C Schaltet Kompass-Anzeige ein/aus.
H Macht Hotspots sichtbar/unsichtbar.