Zudila AG

Webseiten-Erstellung
Webseiten-Programmierung
Webseiten-Wartung

8057 Zürich
Tel: +41 44 310 14 25
Fax: +41 44 310 14 26
Mob: +41 79 691 87 58
vCard, Skype: juergzuerich Skype: juergzuerich

Bookmarks

JavaScript: Bildrotator v1.0

Ihr Browser unterstützt leider die Funktionen mit JavaScript nicht!
Wahrscheinlich haben Sie eine ältere Browser-Version, oder Sie haben JavaScript deaktiviert.
Dadurch funktioniert diese Seite möglicherweise nicht richtig.

Scripte:

website monitoring

Bildwechsel, Bildrotator

Oft kann auf Webseiten ein automatischer Bildwechsel alle paar Sekunden von Vorteil sein.
Da ein Webserver nur angeforderte Dateien liefert, kann dies nicht nur mit HTML- oder PHP-Code gelöst werden, dazu geeignet ist ein JavaScript.
Voraussetzung ist, dass alle eingebundenen Bilder die gleiche Pixelgrösse haben.

Beispiel

Das unten stehende JavaScript ist prinzipiell für beliebig viele Bilder verwendbar.

Referenzen Bildrotator

Code, JavaScript

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 // 1. Der Link zu den Bildern. var bannerbild = new Array ( "http://www.seite.ch/images/bild_a.jpg", "http://www.seite.ch/images/bild_b.png", "http://www.seite.ch/images/bild_c.gif" ); // 2. Die Zeit in Millisekunden der einzelnen Bilder. var timeout = new Array ( 8000,8000,12000); // 3. Der Link zu den Seiten bei Mausklick. var link_url = new Array ( "http://www.seite.ch/produkt/super1.php", "http://www.seite.ch/produkt/klein2.php", "http://www.seite.ch/produkt/gross3.php" ); // 4. Der Titel der Bilder. var titlebanner = new Array ( "Das Superprodukt.", "Das kleine Produkt.", "Das grosse Produkt." ); // 5. Die Anzahl der Bilder. var max_bild = 2; // 6. Den Startwert der Variable vorgeben. var i_bild = 0; // 7. Die eigentliche Funktion starten. function Changebannerwechsel (){ document.getElementById ( "banner_bild" ).src = bannerbild [i_bild]; document.getElementById ( "banner_link" ).title = titlebanner [i_bild]; document.getElementById ( "banner_link" ).href = link_url [i_bild]; window.setTimeout ( "Changebannerwechsel()", timeout [i_bild]); if ( i_bild < max_bild ){ i_bild = i_bild + 1; } else { i_bild = 0; } } window.setTimeout ( "Changebannerwechsel()", 0 ); // Quelle Script: http://www.zudila.ch/scripte/js_bildrot.php // Zudila Bildrotator 1.0, GPL

Erklärungen zum Code

1. Der Link zu den Bildern.
Hier geben wir als erstes die Links zu den einzelnen Bildern ein. Die Zeilen 3 - 5 werden also ersetzt. Man achte auf "," , ")" und ";" . Die Links können, wie im Beispiel, absolut oder auch relativ sein (produkt/super1.php oder ../produkt/super1.php etc.). Wir empfehlen jedoch die absolute Verlinkung, was beim einbinden auf mehreren Webseiten weniger Probleme bereitet.
Die Anzahl der aufgeführten Bilder ist eigentlich beliebig. Wobei es sich bei vielen Bildern, oder bei oft veränderten, lohnt, das Ganze aus einer Datenbank zu generieren.

2. Die Zeit in Millisekunden der einzelnen Bilder.
Hier geben wir in Zeile 9, in der gleichen Reihenfolge wie die Bilder, die Anzeigezeiten in Millisekunden der einzelnen Bilder ein.
Wichtig, es müssen gleichviele Zeiten eingegeben werden wie Bilder.

3. Der Link zu den Seiten bei Mausklick.
Nun geben wir den Link ein, zu dem das Bild führt, z.B. zu einem Produkt oder, wie in unserem Beispiel auf dieser Seite, zu einer anderen Webseite. Wir ersetzen also die Zeilen 13 - 15.

4. Der Titel der Bilder.
Jetzt geben wir noch die Titel zu den Bildern ein. Dieser erscheint beim Überfahren der Bilder mit der Maus. Damit könnte z. B. die Produktenummer mitgegeben werden.

5. Die Anzahl der Bilder.
Auf Zeile 24 ersetzen wir die 2 durch die nun effektive Anzahl der Bilder minus 1. Die Schlaufen von JavaScripts starten beim Zählen normalerweise immer mit 0 und nicht 1.
Oft wird für die Maximale nur der Variablenname "max" vergeben. Das kann problematisch werden, sobald mehrere JavaScripte auf einer Webseite verwendet werden, die auch mit einer Schlaufe und der Variablen "max" versehen sind. Die können sich dann gegenseitig beeinflussen.

6. Den Startwert der Variable vorgeben.
Der Startwert bleibt immer 0. Die Variable legt den Startpunkt der folgenden Schleife fest.
Wie oben, auch hier sieht man als Variable oft nur ein "i". Auch das aus demselben Grund nicht verwenden.

7. Die eigentliche Funktion starten.
An der folgenden eigentlichen Funktion muss / darf nichts mehr verändert werden.

Innerhalb von JavaScripts kann, wie oben, ein Kommentar eingefügt werden. Dieser muss auf der entsprechenden Zeile zu Beginn mit "//" versehen sein. Es ist von Vorteil, diesen Kommentar zu belassen, um so auch in Zukunft das Programm leichter zu verstehen.
Nie schlecht ist es, auch die Quelle mit Link zu kommentieren. Vielleicht ist das in Zukunft von Vorteil. Eventuell verwendet auch ein Dritter das Script gerne?

Code, HTML

Nun gibt es zwei Möglichkeiten das JavaScript in die Webseiten einzubauen, direkt auf der HTML-Seite oder ausgelagert in eine eigene Datei.

JavaScript in der HTML-Datei

Dies ist auf den ersten Blick die einfachere Lösung. Man fügt im <head>-Teil das JavaScript direkt ein.

1 2 3 4 5 6 7 53 54 55 56 57 58 59 60 61 ↵ 62 63 64 ... <html> <head> ... <script type="text/javascript">  </script> ... </head> <body onload="Changebannerwechsel ()"> ... <a target="_blank" href="#" id="banner_link"> <img src="" alt="Bannertausch" name="banner_bild" id="banner_bild" style="width:468px; height:60px" /> </a> ... </body>

Erklärungen zum Code

In Zeile 5 setzen wir den Starttag des JavaScripts. Wichtig für eine allseits richtige Verarbeitungen sind die zusätzlichen Angaben. Mit dem "type" geben wir dem Browser die Art des Scripts an und mit "language" die Version. Oft werden diese Angaben sicht gemacht, was jedoch nicht der Norm entspricht.

In Zeile 6 steht der Starttag für einen normalen HTML-Kommentar. Damit wird eine allfällige Bildschirmanzeige unterdrückt und Browser die kein JavaScript können lesen darüber hinweg.

Die Zeile 7 wird ersetzt durch das oben stehende JavaScript.

In Zeile 53 wird der Kommentar geschlossen.

In Zeile 54 wird das Javascript geschlossen.

In Zeile 58 im Starttag <body> veranlassen wir den Browser mit onload="Changebannerwechsel ()" zum starten der Funktion im JavaScript.

Die Zeilen 60 - 62 fügen wir dort ein, wo der Bildwechsel sein soll. Die Angabe target="_blank" benötigen wir nur, wenn das angeklickte Bild auf eine neue Browserseite führen soll. Geändert werden muss in der style_Angabe nur die Bildgrösse in Pixel.

Nun sollte das Ganze funktionieren.

JavaScript in einer JS-Datei

Spätestens dann, wenn dasselbe JavaScript auf einer weiteren Webseite laufen soll, wird es schöner, das JavaScript in eine eigene Datei auszulagern.
Es ist jedoch immer von Vorteil längere JavaScripts auszulagern, denn so werden die HTML-Dateien kürzer und übersichtlicher.

Nun sieht der HTML-Teil so aus:

1 2 3 4 5 ↵ 6 7 8 9 10 11 12 ↵ 13 14 15 ... <html> <head> ... <script type="text/javascript" src="/script/bildwechsel.js"></script> ... </head> <body onload="Changebannerwechsel ()"> ... <a target="_blank" href="#" id="banner_link"> <src="" alt="Bannertausch" name="banner_bild" id="banner_bild" style="width:468px; height:60px" /> </a> ... </body>

Zusätzlich erstellen wir die Datei bildwechsel.js im Verzeichnis script, das in unserem Beispiel direkt auf der obersten Verzeichnisebene liegt (/script/bildwechsel.js).
In der Datei bildwechsel.js steht nur das ganz oben stehende JavaScript, nichts weiter.
JS - Dateien können mit jedem Editor erstellt werden. Es sind wie die HTML-Dateien reine Textdateien.

Das JavaScript wird wie zuvor eingefügt, nur das nun nicht der Code selber folgt, sondern nur der Link zu Datei.

Vielleicht hat Ihnen unser Skript ein paar Stunden Arbeit erspart?

Besucher heute:	120	Seitenaufrufe heute:	363	gerade online:	2
Besucher gestern:	210	Seitenaufrufe gestern:	592	max. online:	135
Besucher pro Tag:	207,15	Seitenaufrufe pro Tag:	694,97	Eigene Seitenaufrufe:	19

www.zudila.ch info@zudila.ch

Herr Jürg Dieter Lüthard Jürg D. Lüthard Zudila AG info@zudila.ch www.zudila.ch Krokusweg 6 Switzerland 8057 Zürich Zürich +41 44 310 14 25 +41 79 691 87 58 +41 44 310 14 26

N 47º 24.2416 O 8º 32.9866

business Webseiten erstellen, programmieren, warten /
Web pages provide, program, wait /
Les pages Web fournissent, programment, attendent