Diashow in HTML erstellen

Mit HTML ist es ganz einfach möglich, eine eigene Diashow zu erstellen. Dies ist gar nicht so schwer, wie man denkt.

In diesem Artikel zeige ich dir, wie du eine ganz einfache Diashow in HTML erstellen kannst.

 

HTML Diashow erstellen

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

Um nun die eigene Diashow 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 Diashow entweder stoppen, oder per Refresh auf das erste Bild von Neuem beginnen lassen.

Und so funktioniert’s:

Code-Beispiel:

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

 

Erläuterung:

Der Wert content="..." im Meta-Tag http-equiv="refresh" gibt die Zeit in Sekunden an, nach deren Ablauf die neue Seite aufgerufen werden soll. Darüber hinaus enthält dieser Wert ebenso 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 wird.

Am Ende der Diashow könnte diese nun entweder enden. Dazu kannst du den Meta-Tag einfach weglassen und stattdessen unter dem Bild einen Link zum Anfang der Diashow setzen. Oder aber du lässt die Diashow neu starten, indem einfach wieder auf die erste Seite verweisen wird.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.