Bildtrommel

[Andi]

Ich habe ein Problem mit JavaScript! wir versuchen gerade einen virtuellen rundgang durch unsere schule zu gestalten!dabei haben wir uns an einen punkt der schule gestellt und mit einer digitalkamera und um 360° gedreht und fotos gemacht! die wollen wir dann als ein Panorama Bild zusammen schneiden! jetzt haben wir das problem das mit JavaScript auf die homepage zu bekommen! dabei wollen wir, dass ein ausschnitt des panorama bildes gezeigt wird und durch klicken auf buttons(rechts und links) sich die ansicht auf das panoramabild sich jeweils nach rechts oder links bewegt wird! wäre nett, wenn ihr mir es sagen könntet wie ich das machen sollte!
danke

[Stefan Muenz]

Hallo Andi,

dabei wollen wir, dass ein ausschnitt des panorama bildes gezeigt wird und durch klicken auf buttons(rechts und links) sich die ansicht auf das panoramabild sich jeweils nach rechts oder links bewegt wird! wäre nett, wenn ihr mir es sagen könntet wie ich das machen sollte!

Mit DHTML (Dynamic HTML). Alles dazu auf http://selfhtml.teamone.de/dhtml/. Oder hast du jetzt etwa erwartet, ein fertiges Universal-Script gepostet zu bekommen? ;-)
Je konkreter die Frage, desto genauer auch die Antworten, und je allgemeiner die Frage, desto weniger zielfuehrend die Antworten!

viele Gruesse
  Stefan Muenz

[Chräcker Heller]

Hallo Stefan,

er hat nach einem Ansatz gefragt, ("wäre nett, wenn ihr mir es sagen könntet wie ich das machen sollte!") und im Zweifel für den Angeklagten, nach einem zum selber bauen. Warum kann man ihm dem nicht geben?

Chräcker

[Orlando]

Hi Andi,

Panorama Bild

dein Vorhaben ist vielleicht mit Javascript zu realisieren, ich würde trotzdem zu einem entsprechenden Java-Applet raten - die Qualität ist nicht zu vergleichen, da die Bilder in Echtzeit berechnet und räulich dargestellt werden. Alternativ gibt's das AFAIK auch für QuickTime-Movies. Vielleicht denkst du mal über diese Variante nach ;)

LG Orlando

--
SELF-TREFFEN 2002
http://www.rtbg.de/selftreffen/
http://www.megpalffy.org/temp/penneninhh.html

[Chräcker Heller]

Hallo,

wenn Du es selber schreiben möchtest, würde ich mir "einfach" erst das grundlegende Konzept überlegen. Dann erst die umsetzung in JS.

Also: das bild auf einmal zu versenden, und dann beim betrachter sich drehen zu lassen, hielte ich für die ungünstigste methode, weil das Bild naturgemäß relativ groß sein wird bzw soll/darf ,-) Also muß das Bild zerchnitten werden in kleine Häpchen. Während der betrachter ein teil des Bildes sieht, werden die nächsten Nachbarstücke im hintergrund vorgeladen und dann auf Wunsch ins Sichtfeld reingeschoben. Ein bissel so, wie die Motivauswahl meiner unten beworbenen Seite. (Etwas weiter hinten in der Site). ich habe das mit Divs realisiert, der Bequemlichkeit zeige ich Dir eine ältere Skizze, die man aber auf Dein Panorama "interpolieren" kann.

<img src="http://www.stempelgeheimnis.de/diverses/erklaerung.gif" border=0 alt="">

Auf der obersten (z-Index) Ebene hast Du zwei Divs liegen, hier die beiden Pfeile. Diese verdecken die darunterliegenden Divs. In der mitte zwischen den beiden obersten Divs schaut man durch auf den Panoramaausschnitt. (hier das Gesicht) (Das eine Div der untersten Ebene braucht Dich nicht zu ineteresieren, daß brauchte ich auf meiner Seite....)

In der nächsten Ebene hast Du (mindestens) Drei divs, die ein Art Fließband ergeben werden. Während der Betrachter auf dem mittleren Div den aktuellen panoramaauschnitt liegen sieht, lädst Du "unsichtbar" auf den äusseren Divs (die ja von denen der oberen Ebene überdeckt sind) die angrenzenden Stücke nach. Klickt nun der Betrachter auf, sagen wir mal, den rechten Pfeil, dann:

• wandern die rechten  beiden divs (Gesicht und "vögel") pixelweise nach links, bis das "jetzt noch" rechte Div (Vögel) unter dem Betrachterfenster liegt.

• Das linke Div (Stern) positionierst Du dann auf direktem Wege auf die position ganz rechts, da, wo jetzt die "vögel" noch sind.

nun must Du auf das neue rechte  Div das nächstanliegende panora-Abschnittsbild laden, und das Fließband ist bereit für den nächsten Schwenk.

Eigendlich (ehrlich) relativ einfach ;-)))

Wenn Du für jeden Abschnitt noch eine imagemap dynamisch erzeugst, dann kannst Du auf dem Panoramabild sogar anklickpunkte definieren, sagen wir, eine Tür, und dahinter gibts dann weitere Bilder zu sehen ;-) und und und....

Chräcker

http://www.Stempelgeheimnis.de

--
SELF-TREFFEN 2002
http://www.rtbg.de/selftreffen/
http://www.megpalffy.org/temp/penneninhh.html

[Hans-Peter Rieger]

Hi Andi,

google doch mal mit den Stichworten "Panorama" und "Java". Es gibt Programme die haben bereits alle diejenigen Fallstricke gelöst, über die Du mit Deiner JavaScript-Variante in den nächsten Wochen drüberstolper würdest (nahtloses Zusammensetzen der Bilder, Größen-Skalierung und Anpassung der Farben an den Übergängen, etc. etc.). Wenn Du siehst, was theoretisch möglich ist, wird Dich Deine Bastellösung nicht mehr interessieren.

Manche dieser Programme sind sogar kostenlos, wenn sie in einem nicht-kommerziellen Umfeld eingesetzt werden (vielleicht mit Einschränkungen der Funktionalität oder Werbeeinblendungen).

Ciao
Hans-Peter

[Chräcker Heller]

Hallo,

Wenn Du siehst, was theoretisch möglich ist, wird Dich Deine
Bastellösung nicht mehr interessieren.

es entgeht aber auch der Spaß am SELFbasteln ,-)))

Chräcker (der aber zugibt, auf einer Seite auch ein Panorama-Plugin zu nutzen.....)

[Lutz T.]

Ich habe ein Problem mit JavaScript! wir versuchen gerade einen virtuellen rundgang durch unsere schule zu gestalten!dabei haben wir uns an einen punkt der schule gestellt und mit einer digitalkamera und um 360° gedreht und fotos gemacht! die wollen wir dann als ein Panorama Bild zusammen schneiden! jetzt haben wir das problem das mit JavaScript auf die homepage zu bekommen! dabei wollen wir, dass ein ausschnitt des panorama bildes gezeigt wird und durch klicken auf buttons(rechts und links) sich die ansicht auf das panoramabild sich jeweils nach rechts oder links bewegt wird! wäre nett, wenn ihr mir es sagen könntet wie ich das machen sollte!
danke

Hallo Andi,
mach gleich breite Streifen vom Gesamtbild (ca. 36 Bilder je 10°) und numeriere die Bilder von 0.gif bis 35.gif. Danach kannst Du folgendes Script verwenden:

<html>
<head>
<script language="javascript">
var i, n_Gesamt=36, n_Ausschnitt=6, Winkel=0;
Bild=new Array(n_Gesamt);
for (i=0; i<n_Gesamt; i++)
{ Bild[i]=new Image;
  Bild[i].src=i+".gif";
}
function Drehen(Richtung)
{ Winkel=(Winkel+Richtung+n_Gesamt)%n_Gesamt;
  for (i=0; i<n_Ausschnitt; i++)
    document.images[i].src=Bild[(i+Winkel)%n_Gesamt].src;
}
</script>
</head>
<body>
<form>
<table noborder><tr><td>
<input type=button value="<<" onClick="Drehen(-1)">
</td><td>
<script language="javascript">
document.open();
for (i=0; i<n_Ausschnitt; i++)
document.write("<img src='"+Bild[i].src+"'>");
</script>
</td><td>
<input type=button value=">>" onClick="Drehen(1)">
</td></tr></table>
</form>
</body>
</html>

Die Werte für n_Gesamt und n_Ausschnitt kannst Du noch anpassen.
Viele Grüße,
Lutz T.