
Der erste Schritt zur Verwendung ist die Einbindung des Scripts in die Webseite. Dazu wird es im HEAD-Bereich der Seite verlinkt:


<script type="text/javascript" src="be_slide.js"></script>


Das Beispiel geht davon aus, dass das Script im selben Verzeichnis liegt wie die Webseite.
Andernfalls ist der Pfad entsprechend anzupassen.

Im zweiten Schritt wird im BODY-Bereich der Seite an der gewnschten Stelle ein DIV-Container eingefgt, der die Slideshow enthalten wird. Wichtig dabei ist die IDENTITY, in diesem Fall "slideshow" (id="slideshow"). Sie kann frei gewhlt werden, im Script werden wir sie dann als Parameter setzen. Der Container kann beliebig positioniert und formatiert werden.

In diesem Beispiel ist bereits jetzt eines der - im Beispiel in einem Unterordner namens "pics" abgelegten - Bilder eingebunden, mit denen das Script dann arbeitet. Das hat den Vorteil, dass Besuchern mit deaktiviertem JavaScript zumindest das statische Bild angezeigt wird. Fr Besucher mit aktiviertem JavaScript hat der statische Inhalt des DIV-Containers keine Relevanz, da er beim Laden der Seite vom Script ersetzt wird.


<div id="slideshow" style="margin:0px;">
  <img src="pics/Pic (1).jpg" style="width:700px;height:200px;" />
</div>


Damit sind in der Seite selbst alle ntigen Vorbereitungen getroffen.

____________________________________________________________________________________________________________________

Im heruntergeladenen JavaScript-File "be_slide.js" werden jetzt die einzelnen Parameter entsprechend der gewnschten Verwendung gesetzt. Das oben angezeigte Beispiel verwendet die folgenden Einstellungen:

 

//*****parameters to set*****
 
var def_imges=new Array ('pics/Pic (1).jpg', 'pics/Pic (2).jpg', 'pics/Pic (3).jpg', 'pics/Pic (4).jpg', 'pics/Pic (5).jpg', 'pics/Pic (6).jpg', 'pics/Pic (7).jpg', 'pics/Pic (8).jpg', 'pics/Pic (9).jpg', 'pics/Pic (10).jpg' );
    //In diesem Array werden die Bilder angelegt, die die Slideshow verwenden soll.
 
var def_divid="slideshow";
    //Das ist die Identity des DIV-Containers,
    //in dem die Slideshow angezeigt werden soll
 
var def_picwid=700;
    //Die Breite des breitesten Bildes in Pixel.
    //Hinweis: Die Bilder werden vom Script nicht skaliert!
 
var def_pichei=200;
    //Die Hhe des hchsten Bildes in Pixel.
    //Hinweis: Die Bilder werden vom Script nicht skaliert!
 
var def_backgr="#eeeeee";
    //Die Hintergrundfarbe der Slideshow. Sie ist von Bedeutung, wenn Bilder 
    //nicht exakt den - in den beiden vorherigen Parametern angegebenen
    //Abmessungen entsprechen.
 
var def_sdur=3;
    //Die Zeit, die ein Bild zwischen zwei Wechseln angezeigt wird in Sekunden
 
var def_fdur=1;
    //Die Zeit, die der Wechsel dauern soll
 
var def_steps=20;
    //Die Anzahl der Schritte, in denen von 100-0 berblendet werden soll
    //Ein Wert von 1 bis 100, je hher desto flieender der Wechsel
 
var def_startwhen="y";
    //Soll nach dem Laden automatisch gestartet werden? "y" fr Ja, "n" fr Nein
 
var def_shuffle="y";
    //Soll mit einem zuflligen Bild begonnen werden? "y" fr Ja, "n" fr Nein
 
var def_showcontr="y";
    //Sollen Kontrollelemente angezeigt werden? "y" fr Ja, "n" fr Nein
 
var def_contr=new Array('bwd.png','start.png','stop.png','fwd.png');
    //bei den Kontrollelementen hat man die Wahl zwischen Textlinks und grafischen
    //Buttons. In diesem Array werden dementsprechend entweder der Text fr die
    //Textlinks oder der Pfad zum Button eingetragen. Findet das Script die Endung
    //.jpg, .gif oder .png, dann wird der Button angezeigt, ansonsten ein Textlink
    //die Reihenfolge der Kontrollelemente und damit auch der Elemente in diesem 
    //Array ist: ZURCK - START - STOP - VOR
 
//****************************************************************
 

 
Das wars. Viel Spass mit dem Script!