Navigation
Taschenrechner
droid
foto
internet
pc
test
untechnisch
 

Panorama mit JavaScript

Publiziert in PCNEWS-129, Seite 18, "Panorama mit JavaScript"


Auf der Webseite von Andreas Berger fand ich eine sehr brauchbare und ausbaufähige Version eines Panoramas.


Es zeigt die wesentlichen Elemente, die man zum Darstellen eines Panoramas benötigt:

  • eine Bilddatei (pic.jpg)
  • das Programm (panorama.js)
  • die Html-Datei, in der das Panorama angezeigt wird (demo.html)

Funktion

In der Version demo1.html wird das Panorama über die zwei Zeichen < und >, die sich unterhalb des Bildes befinden, nach links oder rechts bewegt, wenn man mit dem Kursor über diese Zeichen fährt. In der Version demo1.html startet der Bildlauf automatisch. Die Bildanzeige beginnt neu, wenn das Bildende erreicht ist. Wenn daher linker und rechter Bildrand fließend ineinander übergehen, hat man den Eindruck einer kontinuierlichen Rundumbewegung. 


Demo

manuell demo.html
auto demo1.html

Einfügen in eine Html-Datei

Das Panorama wird durch die Datei demo.html, bzw. demo1.html angezeigt. Um ein solches Panorama in einer eigenen Datei einzufügen, sind folgende Schritte nötig: 

Skript einfügen

Im head-Teil der Datei, die das Panorama anzeigen soll (in diesem Beispiel demo.html), wird eingefügt:
1
<script language="JavaScript" src="panorama.js" type="text/javascript"></script>
Die Datei panorama.js muss sich im selben Verzeichnis befinden wie die Datei demo.html. Andernfalls muss man den absoluten oder relativen Pfad zur Skript-Datei angeben. 

Bild entwerfen

Ein Panoramabild ist ein langes Bild mit einer geringen Höhe. Man kann auf verschieden Arten erzeugen:

Beispielbild

Beispielbild für Panorama 1020x100px

Beispielbild für Panorama 1020x100px

Bild einbinden

Der Bildpfad muss in der Datei panorama.js angegeben werden. Ist das Bild im selben Verzeichnis wie demo.html, genügt der Dateiname, sonst ist der relative Pfad anzugeben. 

Das Bild wird in einem "div"-Abschnitt eingefügt, der den Namen "panorama" haben muss.
1
<div id="panorama" style="margin:25px;"> <img src="pic.jpg" style="width:400px;height:100px;" /> </div>
Der style im img-Tag legt die Bildgröße fest. Die Breite width ist kleiner als die Breite des eigentlichen Bildes. Die Höhe height entspricht der Bildhöhe. Der style im div-Tag erzeugt einen Rand um das Bild.

Konfiguration

In den ersten Zeilen der Datei panorama.js kann man verschiedene Parameter konfigurieren:

divid="panorama"; die Id des div-Containers der das Panorama enthalten soll
impad='pic.jpg'; Pfad zum Bild (wenn sich das Bild nicht im selben Ordner wie die aufrufende Datei befindet, muss hier der relative Pfad zum Bild angegeben werden
imwid=1020; Breite des Bildes in Pixel
imhei=100; Höhe des Bildes in Pixel
panwid=400; Breite des Anzeigebereichs in Pixel (abzustimmen mit der Style-Angabe des Bildes)
panhei=100; Höhe des Anzeigebereichs in Pixel; weicht die Anzeigehöhe von der Höhe des Bildes ab, dann wird dieses entsprechend proportional skaliert
speed=80; Timeout zwischen den einzelnen Bewegungen, je kleiner der Wert desto schneller das Scrollen
move=5; Schrittweite je Bewegung in Pixel

Kode 

demo.html

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    <head>
        <title>panorama</title>
        <script language="JavaScript" src="panorama.js" type="text/javascript"></script>
    </head>
    <body bgcolor=#eeeeee>
        <div id="panorama"><img src="pic.jpg" style="width:400px;height:100px;" /></div>
    </body>
</html>

panorama.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
/***************************************************************************************
Copyright (C) 2008 Andreas Berger
This script is made by and copyrighted to Andreas Berger - andreas_berger@bretteleben.de
It may be used for free as long as this msg is intact!
****************************************************************************************
Version 20081005
***************************************************************************************/
//erforderliche parameter
divid="panorama"; //die id des div containers der das panorama enthalten soll
impad='pic.jpg'; //pfad zum bild
imwid=1020; //breite des bildes in pixel
imhei=100; //höhe des bildes in pixel
panwid=400; //breite des anzeigebereichs in pixel
panhei=100; //höhe des anzeigebereichs in pixel
//weicht die anzeigehöhe von der höhe des bildes ab, dann wird dieses entsprechend proportional skaliert
speed=40; //timeout zwischen den einzelnen bewegungen, je kleiner der wert desto schneller das scrollen
move=5; // schrittweite je bewegung in pixel
//das wars auch schon, viel spass :)
tim=0;noscroll=false;
imw=imwid*panhei/imhei;imh=panhei;imstart=panwid/2-imw*1.5;
jumpa=panwid/2-imw*2.5;jumpwida=imw-move;
jumpb=panwid/2-imw/2;jumpwidb=imw+move;
conwid=15;panhei+=30;contop=(imh*1)+(10*1);
conlefa=panwid/2-conwid;conlefb=panwid/2;
function sr(){
    if(!noscroll){
    now=parseFloat(document.getElementById("pano").style.left);
  if (now<=jumpa){now+=jumpwida;} else{now-=move;}
  document.getElementById("pano").style.left=now+"px";
    tim=setTimeout("sr()",speed);}}
 
function sl(){
    if(!noscroll){
    now=parseFloat(document.getElementById("pano").style.left);
  if (now>=jumpb){now-=jumpwidb;} else{now+=move;}
  document.getElementById("pano").style.left=now+"px";
    tim=setTimeout("sl()",speed);}}
 
function stop(){clearTimeout(tim); noscroll=true}
 
function shownow() {
    document.getElementById(divid).style.height=panhei+"px";
    document.getElementById(divid).innerHTML=tp;}
 
tp="<div id='panorama2'>";
tp=tp+"<div id='pano' style='position:absolute; left:"+imstart+"px; top:0px; width:"+imw*3+"px; height:"+imh+"px; z-index:2; visibility:visible;'>";
tp=tp+"<img src='"+impad+"' width="+imw+"px height="+imh+"px><img src='"+impad+"' width="+imw+"px height="+imh+"px><img src='"+impad+"' width="+imw+"px height="+imh+"px>";
tp=tp+"</div>";
tp=tp+"<div id='left'><a href='javascript://' onmouseover='noscroll=false; sl()' onmouseout='stop()'>&lt;</a></div>";
tp=tp+"<div id='right'><a href='javascript://' onmouseover='noscroll=false; sr()' onmouseout='stop()'>&gt;</a></div>";
tp=tp+"<</div>";
 
document.write("<style>");
document.write("#panorama2 {position:absolute;width:"+panwid+"px; height:"+panhei+"px; clip:rect(0px,"+panwid+"px,"+panhei+"px,0px); overflow:hidden;}");
document.write("#left {position:absolute; left:"+conlefa+"px; top:"+contop+"px; width:"+conwid+"px; z-index:1; text-align:right;}");
document.write("#right {position:absolute; left:"+conlefb+"px; top:"+contop+"px; width:"+conwid+"px; z-index:1; text-align:left;}");
document.write("#right a, #left a {text-decoration:none;}");
document.write("</style>");
 
onload=shownow;

demo1.html

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    <head>
        <title>panorama</title>
        <script language="JavaScript" src="panorama1.js" type="text/javascript"></script>
    </head>
    <body bgcolor=#eeeeee>
        <div id="panorama"><img src="pic.jpg" style="width:400px;height:100px;" /></div>
    </body>
</html>

panorama1.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
/***************************************************************************************
Copyright (C) 2008 Andreas Berger
This script is made by and copyrighted to Andreas Berger - andreas_berger@bretteleben.de
It may be used for free as long as this msg is intact!
****************************************************************************************
Version 20081005
***************************************************************************************/
//erforderliche parameter
divid="panorama"; //die id des div containers der das panorama enthalten soll
impad='pic.jpg'; //pfad zum bild
imwid=1020; //breite des bildes in pixel
imhei=100; //höhe des bildes in pixel
panwid=400; //breite des anzeigebereichs in pixel
panhei=100; //höhe des anzeigebereichs in pixel
//weicht die anzeigehöhe von der höhe des bildes ab, dann wird dieses entsprechend proportional skaliert
speed=80; //timeout zwischen den einzelnen bewegungen, je kleiner der wert desto schneller das scrollen
move=5; // schrittweite je bewegung in pixel
//das wars auch schon, viel spass :)
tim=0;noscroll=false;
imw=imwid*panhei/imhei;imh=panhei;imstart=panwid/2-imw*1.5;
jumpa=panwid/2-imw*2.5;jumpwida=imw-move;
jumpb=panwid/2-imw/2;jumpwidb=imw+move;
conwid=15;/*panhei+=30;*/contop=(imh*1)+(10*1);
conlefa=panwid/2-conwid;conlefb=panwid/2;
function sr(){
    if(!noscroll){
    now=parseFloat(document.getElementById("pano").style.left);
  if (now<=jumpa){now+=jumpwida;} else{now-=move;}
  document.getElementById("pano").style.left=now+"px";
    tim=setTimeout("sr()",speed);}}
 
function sl(){
    if(!noscroll){
    now=parseFloat(document.getElementById("pano").style.left);
  if (now>=jumpb){now-=jumpwidb;} else{now+=move;}
  document.getElementById("pano").style.left=now+"px";
    tim=setTimeout("sl()",speed);}}
 
function stop(){clearTimeout(tim); noscroll=true}
 
function shownow() {
    document.getElementById(divid).style.height=panhei+"px";
    document.getElementById(divid).innerHTML=tp;
    noscroll=false; sl();
}
 
tp="<div id='panorama2'>";
tp=tp+"<div id='pano' style='position:absolute; left:"+imstart+"px; top:0px; width:"+imw*3+"px; height:"+imh+"px; z-index:2; visibility:visible;'>";
tp=tp+"<img src='"+impad+"' width="+imw+"px height="+imh+"px><img src='"+impad+"' width="+imw+"px height="+imh+"px><img src='"+impad+"' width="+imw+"px height="+imh+"px>";
tp=tp+"</div>";
//tp=tp+"<div id='left'><a href='javascript://' onmouseover='noscroll=false; sl()' onmouseout='stop()'>&lt;</a></div>";
//tp=tp+"<div id='right'><a href='javascript://' onmouseover='noscroll=false; sr()' onmouseout='stop()'>&gt;</a></div>";
tp=tp+"</div>";
 
document.write("<style>");
document.write("#panorama2 {position:absolute;width:"+panwid+"px; height:"+panhei+"px; clip:rect(0px,"+panwid+"px,"+panhei+"px,0px); overflow:hidden;}");
document.write("#left {position:absolute; left:"+conlefa+"px; top:"+contop+"px; width:"+conwid+"px; z-index:1; text-align:right;}");
document.write("#right {position:absolute; left:"+conlefb+"px; top:"+contop+"px; width:"+conwid+"px; z-index:1; text-align:left;}");
document.write("#right a, #left a {text-decoration:none;}");
document.write("</style>");
 
onload=shownow;

Updated on Nov 20, 2012 by Franz Fiala (Version 7)