Der Bilderplayer

Kurzbeschreibung siehe unten
Vorteile Sieht gut aus. Braucht wenig Platz auf der Seite
Nachteile Die Bilderbreite und -höhe werden an das vorgegebene Maß angepasst. Wenn das Seitenverhältnis der Bilder nicht passt werden die Bilder verzerrt.
Schwierigkeit Wenn meine Erklärung so gut ist, wie ich denke, kann's auch ein Anfänger.
Besonderheiten Funktioniert mit den Bildformaten JPG und GIF. Transparente und/oder animierte GIFs sind erlaubt.

Beispiel

Der Einbau

Die Htmlseite vor dem Einbau.

Im folgenden gehe ich davon aus, dass du bereits eine fertig Html-Seite hast in die der Player eingebaut werden soll. Hier siehst du den Quellcode einer Beispielseite.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  <html>
  <head>
  
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <title>Titel</title>
</head> <body>
Hier ist beliebiger Seiteninhalt.
</body> </html>

Ich habe einige wichtige Grundelemente der Beispielseite farblich hintelegt, damit sich Html-Laien besser zurecht finden. Alles was zwischen "<head>" und "</head>" steht ist der Head der Html-Seite. "<body>" ist das Bodytag der Seite. Das Bodytag kann zusätzliche Attribute und/oder Eventhanlder enthalten. Das Bodytag beginnt jedenfalls mit "<body" und endet beim nächsten ">" Alles was zwischen dem Bodytag und </body> steht ist der Body der Html-Seite.

Die Variablen

Damit das Script ordnungsgemäss funktionieren kann must du festlegen wo die verwendeten Bilder im Web zu finden sind, ob die Automatik des Players beim Aufrufen der Seite ein- oder ausgeschaltet sein soll und nach welcher Zeit bei eingeschalteter Automatik das nächste Bild erscheinen soll. Dazu fügst du den gelb hinterlegten Quellcode in den Head deiner Seite ein.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  <html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
  <title>Titel</title>
  
<script type="text/javascript"> <!-- var play = 1; var zeit = 5000; testurl = new Array(); testurl[1]="../Namibiasite/2003/Fotoshow/091.jpg"; testurl[2]="../Bilder/5_auto.jpg"; testurl[3]="../Bilder/a_gesh02.gif"; //--> </script>
</head> <body> Hier ist beliebiger Seiteninhalt. </body> </html>

Die rot geschriebenen Werte müssen von dir angepasst werden.

Das Script

Das Script kannst du auf verschiedene Weise in deine Seite einbauen. Du kannst es direkt in dieHtml-Seite einbauen, oder du kannst es als separate Scriptdatei in deinem Webspace abspeichern und in der Seite referenzieren.

Einbau in die Seite

Um das Script direkt in die Seite ein zu bauen musst du den eben eingefügten Scriptbereich mit den Variablen folgendermassen erweitern:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  <html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
  <title>Titel</title>
  <script type="text/javascript">
  <!--
  var play = 1;
  var zeit = 5000;
  testurl = new Array();
  testurl[1]="../Namibiasite/2003/Fotoshow/091.jpg";
  testurl[2]="../Bilder/5_auto.jpg";
  testurl[3]="../Bilder/a_gesh02.gif";
  
var totalpictures=testurl.length-1; var pictures=1; function start() { timedelay(); } function slideshowupdate(imgName,controls) { if (play == 1) { slidesslideshow = new Image(); slidesslideshow.src = testurl[pictures]; slideshow = eval(imgName + "slideshow.src"); document[imgName].src = slideshow; pictures=pictures + 1; if (pictures > totalpictures) pictures=1; if (controls != 1) timedelay(); return; }; timedelay(); return; }; function timedelay() { timerID = setTimeout("slideshowupdate('slides',0)",zeit); }; function cplay() { play=1; }; function cbegin() { if (play == 0) { play=1; pictures=1; slideshowupdate('slides'); play=0; return; }; pictures=1; slideshowupdate('slides',1); }; function cprev() { if (play == 0) { play=1; if (pictures < 3) pictures=pictures+totalpictures; pictures=pictures-2; slideshowupdate('slides',1); play=0; return; } if (pictures < 3) pictures=pictures+totalpictures; pictures=pictures-2; slideshowupdate('slides',1); }; function cnext() { if (play == 0) { play=1; slideshowupdate('slides',1); play=0; return; }; slideshowupdate('slides',1); }; function cend() { if (play == 0) { play=1; pictures=totalpictures; slideshowupdate('slides',1); play=0; return; }; pictures=totalpictures; slideshowupdate('slides',1); }; function cstop() { play=0; };
//--> </script> </head> <body> Hier ist beliebiger Seiteninhalt. </body> </html>

In diesem Bereich sollten von dir keine Änderungen gemacht werden wenn du keine JavaScriptkenntnisse hast.

Mit externer Scriptdatei

Wenn du mehrere Seiten mit einer solchen Show machen willst, ist es sinnvoll den Hauptteil des Scripts in einer eigenen Datei aus zu lagern. Diese Datei braucht dann nur ein mal angelegt zu werden und kann in jeder beliebigen Seite referenziert werden. Die Datei kannst du dir hier als gepacktes ZIP-Archiv downloaden. Der Name der Datei ist "bildershow.zip". Sie hat nur 521 Byte. Der Download dauert also nur wenige Sekunden. Beim Entpacken entsteht eine Datei namens "bildershow.js". Speichere diese Datei in einem beliebigen Verzeichnis in deinem Webspace. Alternativ kannst du die Datei auch selbt erzeugen indem du eine Textdatei mit dem gelb hinterlegten Text erzeugst und unter dem Namen "bildershow.js" speicherst. Um die Scriptdatei zu referenzieren musst du folgendes in den Quellcode der Seite ergänzen:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  <html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
  <title>Titel</title>
  <script type="text/javascript">
  <!--
  var play = 1;
  var zeit = 5000;
  testurl = new Array();
  testurl[1]="../Namibiasite/2003/Fotoshow/091.jpg";
  testurl[2]="../Bilder/5_auto.jpg";
  testurl[3]="../Bilder/a_gesh02.gif";
  //-->
  </script>
<script type="text/javascript" src="bildershow.js"></script>
</head> <body> Hier ist beliebiger Seiteninhalt. </body> </html>

Der rote Text ist dabei die Adresse der Scriptdatei. Im Beispiel ist die Datei im selben Ordner wie die Html-Seite. Wenn du die Datei in einem anderen Verzeichnis speicherst musst du den Pfad natürlich entsprechend anpassen.

Der Player

Was du bisher gemacht hast hat noch nichts bewirkt. Deine Seite sieht noch genau so aus wie vorher. Das ändert sich jetzt. Jetzt wird der eigentliche Player eingebaut. Dazu fügst den im folgenden Beispiel gelb hinterlegten Quellcode du an der Stelle im Body deiner Seite ein, an der der Player dargestellt werden soll. Da sich am Head der Seite nichts mehr ändert und da ich nicht weiß wie du die Scriptdatei eingebaut hast, zeige ich im Beispielquelltext nur noch den Code ab dem Bodytag.
<body>
  Hier ist beliebiger Seiteninhalt.
<table border=0 cellpadding=0 cellspacing=0> <tr> <td colspan="4" style="border:2px solid black; width: 220px; height: 194px;"> <img src="../Bilder/CalvinT.gif" name="slides" border=0 width="100%" height="100%"> </td> </tr> <tr style="height: 50px; text-align: center;"> <td style="background-color:#aaaaaa; border:1px solid #cccccc; width:25%"> <a href="javascript: cprev()"><img src="ampelgn_l.gif" border=0 width="50" height="100%"></a> </td> <td style="background-color:#aaaaaa; border:1px solid #cccccc; width:25%"> <a href="javascript: cstop()"><img src="ampelrot.gif" border=0 width="50" height="100%"></a> </td> <td style="background-color:#aaaaaa; border:1px solid #cccccc; width:25%"> <a href="javascript: cplay()"><img src="trabbi.gif" border=0 width="50" height="100%"></a> </td> <td style="background-color:#aaaaaa; border:1px solid #cccccc; width:25%"> <a href="javascript: cnext()"><img src="ampelgn_r.gif" border=0 width="50" height="100%"></a> </td> </tr> </table>
Hier ist beliebiger Seiteninhalt. </body> </html>

In diesem Teil habe ich die Bereiche, die du anpassen kannst nicht farblich markiert. Hier kannst du fast alles anpassen.

Das Script starten.

Die Seite ist jetzt fast fertig. Es fehlt nur nach das Ereignis, das die Ausführung des Scripts startet. Dazu erweiterst du das Bodytag um den Eintrag onLoad="timedelay()"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  <html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
  <title>Titel</title>
  <script type="text/javascript">
  <!--
  Hier steht das Script
  //-->
  </script>
  </head>
  <body onLoad="timedelay()">
  Hier ist beliebiger Seiteninhalt.
  Hier ist der Player.
  Hier ist beliebiger Seiteninhalt.
  </body>
  </html>

Onlineauktionen und andere fremde Webseiten

Gerade in Onlineauktionen ist so ein Script manchmal recht praktisch. Leider kann man dort aber nur einen kleinen Teil der Seite selbst beeinflussen. Man kann weder am Head noch am Bodytag etwas verändern. Man fügt nur einen Bereich in den Body ein. Meist kann man das Skript aber trotzdem verwenden.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  <html>
  <head>
  Beliebiger Quellcode den du nicht beeinflussen kannst.
  </head>
  <body>
  Hier ist beliebiger Seiteninhalt den du nicht beeinflussen kannst.
  
<script type="text/javascript"> <!-- var play = 1; var zeit = 5000; testurl = new Array(); testurl[1]="../Namibiasite/2003/Fotoshow/091.jpg"; testurl[2]="../Bilder/5_auto.jpg"; testurl[3]="../Bilder/a_gesh02.gif"; var totalpictures=testurl.length-1; var pictures=1; function start() { timedelay(); } function slideshowupdate(imgName,controls) { if (play == 1) { slidesslideshow = new Image(); slidesslideshow.src = testurl[pictures]; slideshow = eval(imgName + "slideshow.src"); document[imgName].src = slideshow; pictures=pictures + 1; if (pictures > totalpictures) pictures=1; if (controls != 1) timedelay(); return; }; timedelay(); return; }; function timedelay() { timerID = setTimeout("slideshowupdate('slides',0)",zeit); }; function cplay() { play=1; }; function cbegin() { if (play == 0) { play=1; pictures=1; slideshowupdate('slides'); play=0; return; }; pictures=1; slideshowupdate('slides',1); }; function cprev() { if (play == 0) { play=1; if (pictures < 3) pictures=pictures+totalpictures; pictures=pictures-2; slideshowupdate('slides',1); play=0; return; } if (pictures < 3) pictures=pictures+totalpictures; pictures=pictures-2; slideshowupdate('slides',1); }; function cnext() { if (play == 0) { play=1; slideshowupdate('slides',1); play=0; return; }; slideshowupdate('slides',1); }; function cend() { if (play == 0) { play=1; pictures=totalpictures; slideshowupdate('slides',1); play=0; return; }; pictures=totalpictures; slideshowupdate('slides',1); }; function cstop() { play=0; }; //--> </script>
Hier steht beliebiger Inhalt von dir.
<table border=0 cellpadding=0 cellspacing=0> <tr> <td colspan="4" style="border:2px solid black; width: 220px; height: 194px;"> <img src="../Bilder/CalvinT.gif" name="slides" border=0 width="100%" height="100%"> </td> </tr> <tr style="height: 50px; text-align: center;"> <td style="background-color:#aaaaaa; border:1px solid #cccccc; width:25%"> <a href="javascript: cprev()"><img src="ampelgn_l.gif" border=0 width="50" height="100%"></a> </td> <td style="background-color:#aaaaaa; border:1px solid #cccccc; width:25%"> <a href="javascript: cstop()"><img src="ampelrot.gif" border=0 width="50" height="100%"></a> </td> <td style="background-color:#aaaaaa; border:1px solid #cccccc; width:25%"> <a href="javascript: cplay()"><img src="trabbi.gif" border=0 width="50" height="100%"></a> </td> <td style="background-color:#aaaaaa; border:1px solid #cccccc; width:25%"> <a href="javascript: cnext()"><img src="ampelgn_r.gif" border=0 width="50" height="100%"></a> </td> </tr> </table>
Hier steht beliebiger Inhalt von dir.
<script type="text/javascript"> <!-- timedelay(); //--> </script>
Hier ist beliebiger Seiteninhalt den du nicht beeinflussen kannst. </body> </html>

Der erste gelbe Bereich entspricht dem was ich oben unter den Überschriften "Die Variablen" und "Das Script - Einbau in die Seite" erklärt habe. Natürlich musst du auch hier die gleichen Anpasungen vornehmen. Diesen Bereich solltest du gleich am Anfang einbauen.

Der zweite gelbe Bereich erzeugt den Player. Du musst hier die selben Anpassungen vornehmen wie oben unter der Überschrift "Der Player" beschrieben.

Der dritte gelbe Bereich ersetzt den Eintrag ins Bodytag. Du solltest diesen Quellcode soweit unten wie möglich im Quellcode einsetzen.

Einige Gästebücher, Onlineauktionen und andere Seiten, in die man sowas möglicherweise einbauen möche, verhindern die Verwendung von JavaScript oder von bestimmten Schlüsselwörtern. Das kann dazu führen dass das Script dort nicht verwendet werden kann.


Um einen Link zu setzen, der direkt auf diese Seite führt, verwende folgende Url: