Startseite Javascript Lake - Lakescript Beispiel 03
Hauptmenü
Meist gelesen
Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_mostread/helper.php on line 79 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_mostread/helper.php on line 79 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_mostread/helper.php on line 79 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_mostread/helper.php on line 79 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_mostread/helper.php on line 79
Support

Wenn Sie die Erweiterungen und Scripts auf diesen Seiten nützlich finden, freue ich mich über Ihre Unterstützung. Danke!

Betrag: 

Neueste Beiträge
Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_latestnews/helper.php on line 109 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_latestnews/helper.php on line 109 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_latestnews/helper.php on line 109 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_latestnews/helper.php on line 109 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_latestnews/helper.php on line 109
JavaScript: Lake Beispiel03
Geschrieben von: Andreas Berger   
Sonntag, den 07. Dezember 2008 um 10:39 Uhr

Das dritte Beispiel verwendet ebenfalls das Bild aus Beispiel 01 und Beispiel 02. Der obere Teil des Bildes wird nach unten gespiegelt. Zusätzlich kommt ein zweites Bild mit dem unteren Bereich des Hauptbildes zur Verwendung, das durch die Reflexion durchschimmert.

Die Bezeichnungen "lake.html" und "lake.js" entsprechen den Dateinamen in dem Beispiel, das im Download des Scripts hier Javascript: Lake enthalten ist. Die nachfolgenden Erklärungen beziehen sich auf die Dateien im Beispiel und erläutern nur die Einbindung in eine Webseite und die Konfiguration des heruntergeladenen Scripts lake.js.


lake.html - die Webseite

Der erste Schritt zur Verwendung ist jeweils die Einbindung des Scripts in die Webseite. Dazu wird es im HEAD-Bereich der Seite verlinkt:
<script language="JavaScript" type="text/javascript" src="lake.js"></script>

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

Im zweiten Schritt wird im BODY-Bereich der Seite an der gewünschten Stelle ein DIV-Container eingefügt, der das Bild enthalten wird. Wichtig dabei ist die IDENTITY, in diesem Fall "lake" (id="lake"). Sie kann frei gewählt werden, im Script werden wir sie dann als Parameter setzen. Der Container kann beliebig positioniert und formatiert werden.
In diesem Beispiel ist bereits jetzt das Bild eingebunden, mit dem das Script dann arbeitet. Das hat den Vorteil, dass Besuchern mit deaktiviertem JavaScript zumindest das Bild angezeigt wird.
Für 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="lake" style="margin:25px;">
  <img src="image.jpg" style="width:400px;height:267px;" />
</div>

Damit sind in der Seite selbst alle nötigen Vorbereitungen getroffen.


lake.js - die Scriptdatei

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


//*****parameters to set*****
 
var divid="lake";
    //Der Parameter "divid" teilt dem Script mit, in welchem
    //DIV-Container das Bild dargestellt werden soll.
 
var imagea='image.jpg';
    //Hier setzen wir den Pfad zum Bild.
 
var pwidth=400;
    //"pwidth" Ist die Breite des Bildes in Pixel.
 
var pheight=267;
    //"pheight" Ist die Höhe des Bildes in Pixel.
 
var wavetop=109;
    //"wavetop" legt fest, wo die Wellen beginnen sollen,
    //ausgehend vom oberen Bildrand (in Pixel)
 
var wavebot=pheight;
    //"wavebot" legt fest, wo die Wellen enden, ausgehend vom oberen Bildrand (in Pixel).
    //Üblicherweise ist das der untere Bildrand und der Wert "pheight" kann belassen werden.
    //Sollen die Wellen vor dem unteren Bildrand enden, dann ist hier wie bei "wavetop" der
    //Abstand vom oberen Bildrand in Pixel anzugeben. z.B.: var wavebot="220";
 
var reverse=1;
    //"reverse" legt fest, ob der angegebene Teil des Bildes bewegt wird (0)
    //oder ob der darüberliegende Teil des Bildes als Reflexion
    //heruntergespiegelt werden soll (1).
    //In diesem Beispiel spiegeln wir nach unten, also: reverse=1;
 
var opaz=40;
    //Wenn ein zweites Bild verwendet wird, das durch die Wellen durchschimmert,
    //dann kann hier die entsprechende Transparenz festgelegt werden.
    //Die möglichen Werte reichen von 100 (undurchsichtig) bis 0 (transparent).
 
var underlay="underlay.jpg";
    //Wird ein zweites Bild verwendet, das durch die Wellen durchschimmert,
    //dann wird hier der entsprechende Pfad angegeben (z.B.: var underlay="image2.jpg").
    //Andernfalls bleibt der Parameter auf 0.
    //In diesem Beispiel setzen wir hier den Pfad zum zweiten Bild.
 
var overlay=0;
    //Wird das erste Bild mit einem teilweise transparenten Bild überblendet,
     //dann wird hier der entsprechende Pfad angegeben (z.B.: var overlay="image2.png").
     //Andernfalls bleibt der Parameter auf 0.
 
var uwidth=pwidth;
    //Mit "uwidth" kann für das "unterblendete" Bild eine
    //abweichende Breite (in Pixel) festgelegt werden.
    //In der Regel kann der default-Wert belassen werden.
 
var uheight=wavebot-wavetop;
    //Mit "uheight" kann für das "unterblendete" Bild eine
    //abweichende Höhe (in Pixel) festgelegt werden.
     //In der Regel kann der default-Wert belassen werden.
 
var steps=45;
   //Die Variable "steps" legt die Höhe einer "Welle" in Pixel fest.
 
var range=2;
    //"range" legt fest, um wieviele Pixel eine Welle seitlich ausschwingt.
    //Ein Wert von 10 bedeutet z.B., dass jede Welle maximal 10 Pixel
    //nach links und 10 Pixel nach rechts auslenkt.
 
    //Stellt man den Parameter "reverse" auf 1 um den oberen Bereich eines Bildes 
    //nach unten zu spiegeln, dann wird das Bild links und rechts automatisch um den 
    //Wert "range" beschnitten, um das Durchscheinen des Hintergrundes zu vermeiden.
 
var tim=90;
    //"tim" definiert das Timeout zwischen zwei Bewegungen in Tausendstelsekunden.
    //Setzt man den Wert zu niedrig, dann kann das zu Problemen bei der Verarbeitung
    //der Befehle führen (stack-overflow).
 
var autostart=1;
    //Ist "autostart" auf 1, dann startet das Script automatisch mit dem Laden der Seite.
    //Will man es manuell starten, dann setzt man "autostart" auf 0 und bindet
    //in der Seite einen entsprechenden Link ein:
    //z.B.: <a href="javascript:firstmove()">los jetzt!</a>
 
//*****nothing more to do, have fun :) 


Das wars. Welche Wirkung man mit dem Script erzielt hängt neben der Wahl des Motivs wesentlich von den hier gewählten Werten ab und man sollte sich die Zeit nehmen, verschiedene Konfigurationen auszuprobieren. Oftmals haben dabei kleine Änderungen grosse Wirkung.
Zuletzt aktualisiert am Donnerstag, den 26. November 2009 um 19:20 Uhr
 
Deutsch
Panoramic Image Viewer
Follow me on Facebook
Follow me on Google+

bretteleben.de

Add to circles

Wer ist online
Wir haben 14 Gäste online