Bilder scrollen

Auf dieser Homepage finden Sie in den Reiseberichten viele Scrollbilder. Alle Besucher, die Javascript deaktiviert haben sehen die Bilder in einem eingebetteten Frame und müssen selber scrollen.

<IFRAME NAME="Bildframe" SRC="../../grafik/urlaub2005/bild011.jpg" WIDTH="640px" HEIGHT="496px"
     MARGINHEIGHT="0px" MARGINWIDTH="0px" frameborder="0"></IFRAME>

Ein wirklicher 360 Grad Rundblick ist mit dieser einfachen Methode nicht möglich und das Bild startet immer am linken Rand.

Allen Besucher mit Javascript steht eine komfortablere Möglichkeit zur Verfügung. Neben dem Bild befinden sich zwei Pfeile und wenn der Besucher mit dem Mauszeiger auf einen Pfeil geht, scrollt das Bild in die entsprechende Richtung. Bei einem 360 Grad Rundblick scheint das Bild immer durch zu laufen.
Unten sehen Sie zuerst das Ergebnis, sofern Sie Javascript aktiviert haben. Anschließend erkläre ich den Weg dorthin.

Das Grundprinzip hinter dem Scrollbild ist simpel. Definieren Sie mittels IFRAME einen sichtbares Fenster. Ihr Bild muss breiter sein, als das IFRAME. Obwohl das Bild breiter als der IFRAME ist, sieht der Besucher nur den Teil des Bildes, der sich direkt hinter dem IFRAME befindet.
Nun verschieben Sie das Bild hinter dem Fenster. Fertig ist der Effekt.

Bei der Definition des IFRAMEs müssen Sie das Scrollen explizit unterdrücken, da sonst die Scrollbalken erscheinen.

<IFRAME ALIGN="middle" ID="iScroll1" NAME="Bildframe1" SRC="../../grafik/urlaub2005/bild011.jpg"
     WIDTH="640" HEIGHT="480" MARGINHEIGHT="0px" MARGINWIDTH="0px" FRAMEBORDER="0" SCROLLING="no">
</IFRAME>

Wenn der Besucher über ihren Scroll-Button fährt, soll die Scrollroutine aufgerufen werden und beim Verlassen soll sie aufhören. Dieses erreichen Sie mit den Befehlen onMouseOver und onMouseOut.
Der Function Scroll werden drei Parameter übergeben. Der erste Parameter gibt an, welches Bild gescrollt werden soll. Mit dem zweiten Parameter wird die Richtung festgelegt und als drittes wird übergeben, ob es sich um ein 360 Grad Scroll handelt.

<IMG ID="iScroll11" SRC="../../grafik/scroll1.gif" STYLE="WIDTH:30px; HEIGHT:20px; 
    onMouseOver="javascript:Scroll(1,3,1)" onMouseOut="javascript:Scrollende()">

Die Scrollroutine ist etwas komplizierter. Sie besteht aus zwei Teilen. Der erste Teil speichert die Einstellungen global ab, nimmt die notwendige Berechnung der rechten Bildgrenze vor und sorgt dafür, dass der zweite Teil alle 25 ms aufgerufen wird.
Im zweiten Teil wird das Bild nach links oder rechts bewegt. Wird der rechte bzw. linke Rand erreicht, dann gibt es zwei Möglichkeiten, wie die Function reagiert. Handelt es sich um ein 360 Grad Bild, springt das Bild an den anderen Rand. Andernfalls bleibt das Bild am Rand stehen und die zweite Routine wird nicht mehr ausgeführt.

function Scroll(a,b,c) {         //Scrolle Bild a in Richtung b. Modus d=0 halte an, d=1 immer drehen
  bild=a;                        //Werte global speichern
  richtung=c;
  scrollmodus=d;
  grenzeX = parseInt(document.getElementById("iScroll"+a).width) - 
      parseInt(eval("Bildframe"+a).document.getElementsByTagName("IMG")[0].width);
      //Rechte Grenze = Breite des IFRAME - Breite des Bildes. (Der Wert ist negativ)
  speed = Math.round(eval("Bildframe"+a).document.getElementsByTagName("IMG")[0].width / 
      eval("xScrollBild"+a) * 2);
      //Errechnet um wieviele Pixel das Bild verschoben werden soll
  window.clearInterval(tempo);   //evtl. vorhandenes Interval löschen
  tempo = window.setInterval("Scroll2()",25);  //Rufe Scroll2 alle 25ms auf.
}

function Scroll2() {   //Zur Vereinfachung nur X-Achse
  if (richtung == 1) { //Scrolle nach links 
    eval("Bildframe"+nr).document.getElementsByTagName("IMG")[0].style.left = 
        parseInt(eval("Bildframe"+nr).document.getElementsByTagName("IMG")[0].style.left) - speed +"px";
        //Verschiebe das Bild um speed Pixel nach links
    if (parseInt(eval("Bildframe"+nr).document.getElementsByTagName("IMG")[0].style.left) < grenzeX) {
        //Wurde der linke Rand erreicht? Bei ja weiter
      if (scrollmodus == 0) { //kein 360 Grad Bild? Bei 0 weiter
        eval("Bildframe"+nr).document.getElementsByTagName("IMG")[0].style.left = grenzeX+"px";
            //Setze Bild auf linken Rand
        window.clearInterval(tempo);      //lösche Interval
      }
      else eval("Bildframe"+nr).document.getElementsByTagName("IMG")[0].style.left = "0px";
          //handelt es sich um ein 360 Grad Bild setze Bild an den rechten Rand
    }
  }
  if (richtung == 3) {  //Scrolle nach rechts
    eval("Bildframe"+nr).document.getElementsByTagName("IMG")[0].style.left =
        parseInt(eval("Bildframe"+nr).document.getElementsByTagName("IMG")[0].style.left) + speed +"px";
        //Verschiebe das Bild um speed Pixel nach rechts
    if (parseInt(eval("Bildframe"+nr).document.getElementsByTagName("IMG")[0].style.left) > 0) {
        //Wurde der rechte Rand erreicht? Bei ja weiter
      if (scrollmodus == 0) {  //Kein 360 Grad Bild
        eval("Bildframe"+nr).document.getElementsByTagName("IMG")[0].style.left = "0px";
            //Setze Bild auf rechten Rand
        window.clearInterval(tempo); //Lösche Interval
      }
      else eval("Bildframe"+nr).document.getElementsByTagName("IMG")[0].style.left = grenzeX+"px";
          //handelt es sich um ein 360 Grad Bild setze Bild an den linken Rand
    }
  }
}

Wenn der Besucher die Pfeile verläßt, wird die function Scrollende ausgeführt. Diese Function löscht einfach das Interval der Bewegungsfunction und das Bild bleibt stehen.

function Scrollende() { window.clearInterval(tempo); }