Dia-Show in HTML

Scripting-Tipps - HTML


Mit HTML ist es ganz einfach möglich, eine eigene Dia-Show zu erstellen. Dies ist gar nicht so schwer, wie man denkt.
Lesen Sie in diesem Artikel, wie man mit HTML eine eigene Dia-Show erstellt.



Gerade auf Webseiten, bei denen man sich verschiedene Foto-Alben ansehen kann, ist die Funktion einer Dia-Show durchaus sinnvoll und gewollt.
Mittels einfachem HTML lässt sich eine Dia-Show basteln. Diese bietet zwar keine besonderen Funktionen, funktioniert dafür aber in jedem Browser und auf jedem System.

Um nun die eigene Dia-Show zu realisieren, muss man in den Header der HTML-Datei eine Refresh-Anweisung platzieren. Diese verweist auf ein weiteres HTML-Dokument, welches das nächste Bild enthält. Dies wird so lange fortgesetzt, bis das letzte Bild erreicht ist. Hier kann man dann die Dia-Show entweder stoppen, oder per Refresh auf das erste Bild von Neuem beginnen lassen.
Und so funktioniert's:


Beispiel:

<html>
<head>
  <title>Dia-Show</title>
  <meta http-equiv="refresh" content="10; URL=bild_2.htm">
</head>
<body>
<img src="bild1.png" alt="Erstes Bild der Dia-Show" />
</body>
</html>


Erläuterung:
Der Wert content="..." im Meta-Tag http-equiv="refreh" gibt zum einen die Zeit in Sekunden an, nachdem die neue Seite aufgerufen werden soll. Darüber hinaus enthält dieser Wert die Angabe der Ziel-URL, die als nächstes aufgerufen werden soll. Für das obige Beispiel bedeutet dies, dass nach 10 Sekunden die Datei "bild_2.htm" aufgerufen werden soll.

Am Ende der Dia-Show könnten Sie diese nun entweder enden lassen (den Meta-Tag einfach weglassen und stattdessen unter dem Bild einen Link zum Anfang der Dia-Show setzen), oder aber die Dia-Show neu starten lassen, indem Sie einfach wieder auf die erste Seite verweisen.



Weitere Artikel: