Rubriken: Bildpräsentation, Panoramaaufnahmen
Panoramafotografie: Ausgabe im Browser
1999-10-12 Durch ihre große Breite können Panorama-Fotos meist nicht wie andere Bilder einfach in HTML-Seiten eingesetzt werden. Soll die Bildgröße in Hinblick auf Ladezeit (Dateigröße) und Ausdehnung (Breite in Pixeln) im Rahmen bleiben, müsste man das Bild soweit reduzieren, dass der Betrachter der Seite kaum noch Details erkennen kann. (Michael Guthmann)
Liebe
Leser, diese Seite wird derzeit überarbeitet.
Es bietet sich daher an, den Betrachter wie durch ein Fenster in das
Panorama blicken zu lassen. Er sieht dann jeweils nur einen Ausschnitt des
Gesamtpanoramas, den er selbst verändern kann. Der so entstehende Eindruck
kommt unserer normalen Sehgewohnheit recht nahe. Wir sehen ja auch keine
360° auf einmal, sondern nur einen Ausschnitt davon und drehen uns nach
links oder rechts, wenn wir mehr sehen wollen.
Noch ausgefeiltere Möglichkeiten bieten spezielle Browser-Plug-Ins, die das
Panorama in einem kleinen interaktiven Fenster anzeigen. Plug-Ins können
aber durchaus tückisch beim Einbau in HTML-Seiten sein und erfordern bei
vielen Benutzern zunächst das Herunterladen spezieller Zusatzkomponenten für
ihren Browser. Dafür können Sie sich anschließend mit der Maus im Panorama
bewegen und hinein- und wieder herauszoomen. Hierbei wird das Bild scheinbar
auf einen Zylinder bzw. eine Kugel projiziert und nur jeweils ein kleiner
Ausschnitt des gesamten Panoramas gezeigt, wodurch ein lebensnaher
Bildeindruck erreicht wird.
Panoramen im separaten Browser-Fenster zeigen
Diese einfache Lösung setzt auf
Standard-Befehle, die von allen modernen Internet-Browsern interpretiert
werden und ohne spezielle Plug-Ins auskommen, dafür nur wenig Interaktivität
bieten. Es ist sinnvoll, im Browser selbst nur kleines Vorschaubild anzubieten und über
einen Link auf ein größeres Bild zu verzweigen. Hiermit erreichen Sie zwei wesentliche
Vorteile: Die Downloadzeit Ihrer Seiten bleibt kurz, und wenn jemand eine detaillierte
Ansicht wünscht, erhält er sie durch einen einzigen Mausklick.
Dann ist es sehr schön, das große Panorama in einem Extrafenster ohne störende
Navigationsknöpfe zu zeigen. Hierfür müssen Sie nur eine Javascript-Funktion in Ihre
HTML-Seite einfügen. Diese Funktion kann theoretisch an jeder beliebigen Stelle Ihrer
HTML-Datei stehen, damit sie allerdings möglichst früh geladen wird, ist es sinnvoll, sie
in den Kopfbereich zwischen die Marken <head> und </head> der HTML-Datei zu
stellen. Beispiel:
<script LANGUAGE="JavaScript">
<!-- hide
function panorama() {
window.open("Bildname-gross.jpg","","SCROLLBARS="yes",TOOLBAR="no",
LOCATION="no",DIRECTORIES="no",STATUS="no",MENUBAR="no",
RESIZABLE="no",WIDTH="640",HEIGHT="472");
}
// -->
</script> |
Diese Funktion müssen Sie dann später über einen entsprechenden Link aufrufen.
| <a HREF="JavaScript:panorama()"><img
SRC="Bildname-klein.JPG" BORDER="0",WIDTH="584",HEIGHT="103"></a> |
Panoramen im eingebetteten Frame zeigen
Eine gute Möglichkeit die Monitorbreite nicht zu sprengen, ist ein eingebetteter Frame.
Während in den Kindertagen des WWW nur der Microsoft Internet Explorer
Frames darstellte, zeigen mittlerweile alle aktuellen Versionen der gängigen
Browser Frames an (Mozilla 1.1, Opera 7.03, Netscape 7.1 und Internet
Explorer seit 3.0) . Eingebettete Frames unterteilen den Bildschirm nicht, sondern stehen ähnlich wie
Grafiken innerhalb einer HTML-Seite. In diesen Frames können andere HTML-Dateien oder
Bilder angezeigt werden. Ist der Inhalt des Frames größer als der Platz, den Sie dem
eingebetteten Frame zur Verfügung stellen, erhalten Sie Rollbalken innerhalb Ihrer
Internetseite.
Beispiel:
<html> <head>
<title>Beispiel für einen eingebetteten Frame</title>
</head> <body> Seiteninhalt vor dem eingebetteten Frame.
<iframe SRC="dateiname.JPG" WIDTH="200" HEIGHT="300" HSPACE="30"
VSPACE="50" ALIGN="left" SCROLLING="yes">
Dieser Text wird angezeigt, wenn der Browser den Befehl nicht
kennt.
</iframe>
Seiteninhalt nach dem eingebetteten Frame.
</body> </html> |
Sie können einem eingebetteten Frame verschiedene Eigenschaften
zuweisen. So können Sie die Größe (Optionen WIDTH und HEIGHT), den Abstand zum
angrenzenden Text (Optionen HSPACE und VSPACE), die Ausrichtung (Option ALIGN) und die
Verwendung von Scrollbalken (Option SCROLLING) angeben. Durch diese Eigenschaften haben
Sie die Möglichkeit, den eingebetteten Frame nach Belieben in Ihre HTML-Datei einzufügen.
Für den Fall, dass ein Besucher einen Browser verwendet, der diesen Befehl nicht
kennt, sollten Sie eine Alternative bereitstellen. Am besten zeigen Sie diesem Besucher
ein kleines Vorschaubild und verweisen damit auf ein neues Fenster (siehe
oben "Panoramen im separaten Browser-Fenster zeigen"). Den HTML-Befehl
zum Aufrufen des Java-Scriptes müssen Sie zwischen die beiden Marken
<iframe…..> und </iframe> stellen, damit nur diejenigen Besucher den
Hinweis zu Gesicht bekommen, deren Browser den eingebetteten Frame nicht anzeigt.
Apple QuickTime Plug-In
Fast alle von uns besprochenen Stitch-Programme können ein
Panorama auch als QuickTime Movie abspeichern, das der Besucher Ihrer Internetseite mit
dem zugehörigen Apple QuickTime Plug-In anschauen kann. Die Integration in Ihre Seite ist
ziemlich einfach. Wählen Sie beim Abspeichern einfach "QuickTime Movie" als
Dateiformat aus. Zum Einbinden in Ihre Homepage benötigen Sie nur diesen kleinen
HTML-Befehl:
| <embed SRC="Dateiname.mov"
PLUGINSPAGE="http://www.apple.com/quicktime" WIDTH="320"
HEIGHT="240" CONTROLLER=true> |
Die Angaben der Höhe (Option HEIGHT) und der Breite (Option WIDTH) sind unbedingt
erforderlich. Sie werden in Pixeln angegeben. Die Höhe sollte mindestens so groß sein
wie Ihr Ausgangsbild, ansonsten wird Ihr Panorama beschnitten. Wollen Sie noch die
Bedienungselemente anzeigen, müssen Sie die Höhe um 16 Pixel größer als Ihr
Ausgangsbild wählen, damit QuickTime die Bedienungsleiste mit anzeigen kann. Vergessen
Sie die 16 Pixel aufzuaddieren, wird die Bedienungsleiste nicht bzw. nur teilweise
angezeigt und das Bild am oberen Rand beschnitten.
Welche zusätzlichen Einflussmöglichkeiten bestehen, können Sie auf den
QuickTime-Seiten von Apple erfahren (siehe weiterführende Links).
So können Sie zum Beispiel mit der Option FOV den horizontalen Bildwinkel eingeben, mit
dem Ihr Panorama zu Beginn gezeigt werden soll. Hier dürfen Sie Zahlenwerte zwischen 8
und 64 (also zwischen 8 und 64 Grad) angeben. Dies entspricht übrigens dem Zoomfaktor,
den jeder Besucher Ihrer Internetseite durch Drücken der Umschalt- bzw. Strg-Taste selbst
einstellen kann. Es ist sinnvoll, einen Link zu der Internetseite von Apple anzugeben, auf
der Ihre Besucher das nötige Plug-In herunterladen können, wenn es bei ihnen noch nicht
installiert ist. Auch kann es sinnvoll sein, den Besuchern Ihrer Seite zu erklären, wie
sie sich in dem Panorama bewegen können.
Klicken Sie mit Ihrer Maus auf das
Panorama, um sich in dem Panorama zu bewegen. Mit der Umschalt- bzw. Strg-Tast können Sie
ins Panorama hinein- bzw. herauszoomen. Damit Sie das Panaroma angezeigt bekommen, müssen
Sie das Apple QuickTime Plug-In installiert haben, das Sie kostenlos beim Hersteller herunterladen können
(siehe weiterführende Links).
iseemedia Plug-In bzw. Java-Applet
Speziell für Benutzer des
Stitch-Programmes Photovista von Live Picture bzw. MGI bietet sich diese
Möglichkeit an, da Photovista keine QuickTime Movies speichern kann. Dafür
bietet Photovista mit dem Java-Applet eine interessante Alternative zu
Plug-Ins.
Das Stitch-Programm Photovista von Live Picture bietet neben dem Apple
QuickTime-Format auch eigene Möglichkeiten zur Einbindung der Panoramen als
interaktives Fenster in eine HTML-Seite. Allerdings benötigt der Betrachter
zum Anschauen ein ganz spezielles Plug-In, das bei Photovista mitgeliefert
wird oder von der Seite des Herstellers herunterladen werden kann (Link
einfügen). Setzen Sie einen Link auf die Download-Seite, damit sich Ihre
Besucher das Plug-In herunterladen können.
Anmerkung: Die beiden Absätze widersprechen
sich! Tatsächlich kann Photovista kein QuickTime-Format speichern. Ich
schlage folgenden Text vor:
Speziell für Benutzer des
Stitch-Programmes Photovista von iseemedia bietet sich diese Möglichkeit an,
da Photovista keine QuickTime Movies speichern kann. Dafür offeriert
Photovista
mit dem Java-Applet eine interessante Alternative zu Plug-Ins.
Photovista bietet eine eigene Möglichkeiten zur Einbindung der Panoramen
als interaktives Fenster in eine HTML-Seite. Allerdings benötigt der
Betrachter zum Anschauen ein ganz spezielles Plug-In, das bei Photovista
mitgeliefert wird oder von der Seite des Herstellers herunterladen werden
kann. Das 2,2 MByte (für Windows) bzw.
1,3 MByte (für Macintosh) große Plug-In dient auch zur Wiedergabe von hoch
auflösenden (zoombaren) Bildern im Flashpix-Format. Setzen Sie einen
Link auf die Download-Seite von iseemedia, damit sich Ihre Besucher das
Plug-In herunterladen können (siehe weiterführende Links).
Eine weitere Alternative von Photovista besteht in der Generierung eines
speziellen Java-Applets. Der Vorteil von Java ist, dass Ihr Besucher zum
Betrachten Ihres Panoramas kein spezielles Plug-In für seinen Browser
benötigt. Der Nachteil besteht in einer erhöhten Downloadzeit, da zusätzlich
der Java-Programmcode herunter geladen werden muss (57 KByte).
Um die HTML-Dateien zu generieren, müssen Sie unter Photovista fast nichts beachten.
Sie erstellen Ihr Panorama, wie wir es in unserer Photovista-Rezension
beschrieben haben. Wenn Sie abschließend Ihr Panorama speichern, wählen Sie
einfach "JPEG" und unter "Web Options" "Panorama w/ java viewer (No Plug-in)".
Photovista speichert in das gewählte Verzeichnis das Panorama-Bild, eine
IVR-Datei, das Java Applet und eine HTML-Seite. Die HTML-Datei können Sie einfach in einem Texteditor öffnen und daraus den
nötigen Programmcode für Ihre Internetseite kopieren. Der für Sie
interessante Teil ist speziell gekennzeichnet mit <!--//---Begin Copy Here--//-->
und <!--//--End Copy Here--//-->. Diesen Inhalt können Sie an eine beliebige
Stelle in einer neuen Seite einsetzen. Wichtig ist dabei der richtige
Dateipfad von "value=MeinPanoramabild.ivr" und dass die Dateien "MeinPanoramabild.ivr",
"MeinPanoramabild.jpg" und das Java Applet "panoapplet.jar" in einem
Verzeichnis liegen.
Ulead Plug-In
Auch Ulead bietet beim Stitch-Programm Cool 360 die Möglichkeit, automatisch den
nötigen HTML-Code zu generieren. Wenn Sie Ihr Panorama als "Web" abspeichern,
generiert Ihnen Cool 360 im selben Ordner wie die Bilddatei eine HTML-Datei und eine
weitere Datei mit der Endung "UVR". In der so erzeugten HTML-Datei ist das
Panorama nur als ganz normales Bild eingebunden. Zur Anzeige in einem interaktiven Fenster
müssen Sie dagegen folgenden Befehl in Ihre HTML-Datei einbauen:
| <embed SRC="Dateiname.UVR" WIDTH="320"
HEIGHT="240"> |
Klicken Sie mit Ihrer Maus auf das
Panorama, um sich in dem Panorama zu bewegen. Damit Sie das Panaroma angezeigt bekommen,
müssen Sie den Ulead Cool 360 Viewer installiert haben, den Sie kostenlos beim Hersteller herunterladen können
(siehe weiterführende Links).
Wenn Sie nun diese HTML-Datei auf den Webserver kopieren, achten Sie darauf,
dass Ihr
Panorama, die HTML-Datei und die UVR-Datei in dem selben Ordner befinden. Sollte Ihr
Panorama nicht angezeigt werden, müssen Sie auf Ihrem Webserver der MIME-Zuordnung noch
folgende Einstellungen hinzufügen:
Erweiterung: .UVR
Inhaltstyp (MIME): Ulead/vrml
Sollten Sie keine Administrationsrechte auf Ihrem Server haben, leiten Sie diese
Informationen an den zuständigen Administrator weiter. Auch hier ist es wieder sinnvoll,
auf der Seite mit Ihrem Panorama einen Link auf die Downloadseite von Ulead
unterzubringen, damit die Besucher, die das nötige Plug-In noch nicht
installiert haben, es von dort herunterladen können.