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.
- Der Wert bei "var play=" gibt an ob der Player beim Aufrufen der Seite im Automatikbetrieb
laufen soll. Erlaubt sind die Werte 1 oder 0. Bei 1 ist die Automatik an, bei 0 ist sie aus.
- Bei "var zeit =" musst du angeben nach welcher Zeitspanne das jeweils nächste Bild zu sehen sein soll. Erlaubt
sind ganze Zahlen ab 1. Die Zahl gibt die Zeit in Millisekunden an. Der Wert 5000 im Beispiel steht also für 5 Sekunden.
- Bei "testurl[x]=" musst du die Adresse der Bilder angeben, die
der Player abwechselnd anzeigen soll. Die Adresse muss in Anführungszeichen stehen. Es sind relative und absolute Adressen
erlaubt. Bei absoluten Adressen darf das "http://" nicht vergessen werden. Für jedes Bild muss eine solche Zeile erzeugt
werden. In jeder Zeile ist bei "testurl[x]" für x die Nummer des Bildes ein zu setzen. Die Bilder mussen fortlaufend nummeriert
sein. Es darf keine Nummer doppelt vorkommen und es darf keine Nummer ausgelassen 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.
- Wenn du ein wenig Ahnung von Html hast, kannst du sehen, dass der ganze Player eigentlich eine Tabelle ist.
Du kannst ihn also wie eine ganz normale Tabelle positionieren und/oder nach Bedarf von Text umfließen lassen.
- In der Zeile <td colspan="4" style="border:2px solid black; width: 220px; height:
194px;"> wird unter anderm festgelgt wie der Rahmen der oberen Zelle mit dem Bild aussieht und wie groß die Zelle ist.
- Bei border:2px wird die Breite des Rahmens festgelgt.
"2px" steht für 2 Pixel. Wenn du keinen Rahmen haben willst musst du border:2px solid
black; weg lassen.
- solid legt die Art der Rahmenlinie fest. "solid" erzeugt eine durchgezogene Linie.
Möglich sind auch z.B. "dotted" für einen gepunkteten Rahmen, "dashed" für einen gestrichelten Rahmen oder
"double" für eine durchgezogene Doppellinie als Rahmen.
- black gibt die Farbe des Rahmens an. Über mögliche Farbangaben kannst du dich auf
meiner Seite über Hintergrundfarben informieren.
- Mit width: 220px; wird die Breite der Zelle und mit
height: 194px; wird die Höhe der Zelle festgelegt. Das Bild füllt die Zelle grundsätzlich ganz aus. Kleinere Bilder werden vergrößert,
größere Bilder werden verkleinert. Falls das Seitenverhältnis der Zelle anders als das Seitenverhältnis der Bilder ist, werden die Bilder
entsprechend verzerrt.
- <img src="../Bilder/CalvinT.gif" name="slides" border=0
width="100%" height="100%"> legt das Startbild des Players fest. Trage hier statt
"../Bilder/CalvinT.gif" die Adresse deines Startbildes ein.
- In der Zeile <tr style="height: 50px; text-align: center;"> geht es um die
Buttons mit denen man den Player bedient. Es handelt sich um normale Tabellenzellen. Wenn du dich mit Html etwas auskennst kannst du
die Buttons also nach eigenen Vorstellungen gestalten. Du kannst diese Tabellenzeile auch weglassen und die Steuerelmente anders gestalten.
Die eigentlichen Funktionen werden durch Hyperlinks aufgerufen.
- height: 50px; legt fest, dass die Buttons 50 Pixel hoch sind.
- text-align: center; legt fest, dass die Elemente auf den Buttons mittig angeordnet sind.
Möglich ist auch text-align: right; um die Inhallte rechts aus zu richten. Um sie links aus zu richten
kannst du den Eintrag weg lassen.
- <td style="background-color:#aaaaaa; border:1px solid #cccccc; width:25%">
beeinflusst das Aussehen des ersten Buttons.
- background-color:#aaaaaa; legt die Hintergrundfarbe fest. Ein helles Grau. Über
mögliche Farbangaben kannst du dich auf meiner Seite über Hintergrundfarben informieren.
- border:1px solid #cccccc; legt die Breite, die Linienart und die Farbe des Rahmens in
gleicher Weise fest, wie das auch bei der oberen Zelle für das Bild gemacht wurde.
- width:25% sorgt dafür, dass die Zelle 25% der Breite der Tabelle einnimmt. Nätülich kannst
du die Zelle auch breiter oder schmaler machen. Achte aber darauf, dass die 4 Buttons zusammen 100% haben.
- <a href="javascript: cprev()"><img src="ampelgn_l.gif" border=0
width="50" height="100%"></a> bestimmt den Inhald des ersten Buttons. Der Button enthält einen Link der
die Funktion cprev() aus dem Script aufruft. Dieser Link ist im Beispiel in einem Bild enthalten. Natürlich kannst du andere Bilder verwenden oder
statt dessen Text oder sonst was verwenden.
- src="ampelgn_l.gif" ist die Adresse des Bildes auf dem Button.
- border=0 sorgt dafür, dass das Bild keinen eigenen Rahmen bekommt.
- width="50" legt die Breite des Bildes fest. Diese Angabe ist in Pixel. Achte
darauf, dass das Bild höchstens so breit wie die Zelle ist.
- height="100%" ist die Höhe des Bildes. Wenn Breite oder Höhe in Prozent
angegeben werden bezieht sich die Angabe immer auf das übergeordnete Html-Element. Das ist hier die Tabellenzelle.
- Danach folgen entsprechende Zeilen für die anderen 3 Buttons.
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>
|
|
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:
