Workshop Diashow - Dia-Schau einrichten mit HTML

Sie möchten den Besuchern Ihrer Website ersparen, sich mühsam durch die 683 Bilder Ihres Malediven-Urlaubs zu klicken? Machen Sie aus Ihren Bildern eine Dia-Schau.

Dia-Schau einrichten über Javascript? Die Nachteile:

Im Internet werden zwar viele Javascript-Vorlagen angeboten. Doch die Javascript-Diashows haben auch Nachteile:

Viele Javascript-Diashows funktionieren nur mit dem Internet Explorer, nicht aber mit Netscape / Mozilla / Firefox oder Opera bzw. umgekehrt.
Bei Javascript-Diashows müssen alle Bilder das gleiche Format haben (oder sie werden verzerrt dargestellt). Deshalb können auch immer nur hoch- oder querformatige Bilder angezeigt werden.
Die Ausgabe bildbezogener Beschreibungstexte ist bei Javascript-Diashows nicht möglich.

Dia-Schau einrichten mit reinem HTML: Die Vorteile:

Eine Dia-Schau läßt sich auch mit reinem HTML umsetzen, wenn man die HTML-Weiterleitungsfunktion verwendet. Die Vorteile liegen auf der Hand: Sie haben eine technisch solide Lösung, Ihre Dia-Schau läuft unter jedem Browser, Sie können hoch- und querformatige Bilder anzeigen und je Bild unterschiedliche Beschreibungstexte am Bildschirm ausgeben.

Einziger Nachteil: Fleißarbeit ist angesagt, weil für jedes Bild eine eigene HTML-Datei erforderlich ist. Den doppelten Aufwand haben Sie, wenn Sie Ihren Besuchern nicht nur die Dia-Schau, sondern zusätzlich eine Blätter-Funktion für Ihre Bilder anbieten wollen.

In diesem Fall brauchen Sie für jedes Bild zwei HTML-Dateien: In der Datei mit der Blätter-Funktion bieten Sie jeweils drei Links an: "zum vorhergehenden Bild", "Dia-Schau starten" und "zum nächsten Bild". Die Datei für die Dia-Schau enthält die HTML-Weiterleitung an die nächste Bilddatei und den Link "Dia-Schau beenden".

Blätter-Funktion: Muster-Code der HTML-Datei für das 2. Bild (bild-002.htm):

    <html>
    <head<
    <title>Bild 002</title>
    <meta http-equiv="content-type"
          content="text/html;charset=iso-8859-1">
    </head>
    <body>
      <table width="100%" summary="">
      <tr>
        <td align="left">Beschreibung A</td>
        <td align="right">Beschreibung B</td>
      </tr>
      </table>
      <table align="center" summary="">
      <tr>
        <td align="center">
          <img src="bild-002.jpg" width="640" height="480" border="2"
            alt="Beschreibung C">
        </td>
      </tr>
      </table>
      <table width="100%" summary="">
      <colgroup>
        <col width="280"><col width="240"><col width="280">
      </colgroup>
      <tr>
        <td align="left">
          <a href="bild-001.htm">zum vorhergehenden Bild</a>
        </td>
        <td align="center">
          <a href="dias-003.htm">Dia-Schau starten</a>
        </td>
        <td align="right">
          <a href="bild-003.htm">zum nächsten Bild</a>
        </td>
      </tr></table>
    </body>
    </html>

Dia-Schau: Muster-Code der HTML-Datei für das 2. Bild (dias-002.htm):

    <html>
    <head>
    <title>Bild 002</title>
    <!-- nach 8 Sekunden Verzögerung:
         Weiterleitung zu Datei dias-003.htm: -->
    <meta http-equiv="refresh" content="8; url=dias-003.htm">
    <meta http-equiv="content-type"
          content="text/html;charset=iso-8859-1"<
    </head>
    <body>
    <table width="100%" summary="">
    <tr>
      <td align="left">Beschreibung A</td>
      <td align="right">Beschreibung B</td>
    </tr>
    </table>
    <table align="center" summary="">
    <tr>
      <td align="center">
        <img src="bild-002.jpg" width="640" height="480" border="2"
          alt="Beschreibung C">
      </td>
    </tr>
    </table>
    <table width="100%" summary=""><tr><td align="center">
      <a href="bild-002.htm">Dia-Schau beenden</a>
    </td></tr></table>
    </body>
    </html>

Dia-Schau und Blätter-Funktion erstellen: So gehen Sie vor:

Kopieren Sie über die Windows-Zwischenablage jeweils den HTML-Code für beide Dateien in Ihren HTML-Editor.
Fügen Sie die Formatierungen für Ihr Layout und Ihre Meta-tags hinzu, passen Sie die Beschreibungen, Bildnamen und Bildabmessungen an und legen die Verzögerungszeit für die Weiterleitung fest.
Wenn Sie für die Blätter-Funktion und für die Dia-Schau jeweils eine getestete Muster-Datei haben, kopieren Sie beide Dateien in der Anzahl Ihrer Bilder und ändern dann in den kopierten Dateien title-tag, Weiterleitungs-url, die Beschreibungen, Bildnamen und -abmessungen sowie die Links.
Abschließend legen Sie fest, auf welche Datei Sie in der letzten Dia-Schau-Datei weiterleiten (auf die erste Dia-Schau-Datei?), und bestimmen die Link-Ziele "zum vorhergehenden Bild" in der ersten und "zum nächsten Bild" in der letzten Datei der Blätter-Funktion.
Bei Bedarf setzen Sie zusätzlich in Ihrer Steuerleiste einen Link auf die erste Datei Ihrer Dia-Schau und unterlegen ihn mit dem Link-Text "Dia-Schau starten".

Sie erleichtern sich die Arbeit beim Kopieren und Umbenennen und Abändern kopierter Dateien erheblich, wenn Sie für alle Ihre Dateien das gleiche Namens-Schema verwenden und die Dateien aufsteigend durchnummerieren. Für das gleichzeitige Umbenennen mehrerer Dateien gibt es besondere Programme wie etwa Joe (siehe auch Kurzbeschreibung in Windows: Tips & Tricks).

"Sprechende" Dateinamen wie kaethe-im-bikini.htm oder currywurst-in-der-strandbar.htm mögen sonst zwar viele Vorteile haben, beim massenhaften Umbenennen und Abändern kopierter Dateien sind sie aber lästig. Ich verwende hier für die Dateien mit der Blätter-Funktion das Schema bild-nnn.htm und für die Dateien für die Dia-Schau das Schema dias-nnn.htm.

Verzögerungszeit vor Weiterleitung ermitteln:

Um die für Ihre Bilder geeignete Verzögerungszeit zu ermitteln, sollten Sie zunächst einige HTML-Dateien und die zugehörigen Bilder auf Ihren Server hochladen und die Dia-Schau von dort testweise ablaufen lassen. Das Zeitempfinden mancher Browser ist recht eigenartig und ihr Verzögerungsverhalten vor der Weiterleitung oft unterschiedlich, je nachdem, ob die Dateien auf der lokalen Festplatte oder auf dem Server liegen.

Die superkomfortable Benutzerführung: Dia-Schau, Blätter-Funktion und anklickbare Miniatur-Bildübersichten:

Wenn Sie auf Ihrer Website neben Dia-Schau und Blätter-Funktion zusätzlich noch Miniatur-Bildübersichten anbieten, von denen aus jedes Bild im Großformat aufgerufen werden kann, bieten Sie Ihren Besuchern für Ihre Bilder eine superkomfortable Benutzerführung:

Ihre Besucher können entweder gezielt auswählen, welche Bilder sie sich im Großformat ansehen wollen, oder durch Ihre Bilder blättern, oder sich die Dia-Schau anzeigen lassen.
Die Dia-Schau kann in jedem Einzelbild gestartet bzw. beendet werden.
Jeder Besucher kann das Anfangsbild für "seine" Dia-Schau selbst bestimmen und somit festlegen, welche Bilder er sich ansehen will.
Keiner wird gezwungen, 50 für ihn unwesentliche Bilder über sich ergehen zu lassen, nur um zum interessanten 51. Bild zu gelangen, weil aus der Miniatur-Bildübersicht direkt auf das interessante 51. Bild zugegriffen werden kann.
Wenn ein Besucher ein bestimmtes Bild länger ansehen will, kann er die Dia-Schau jederzeit anhalten.
Auch Zurückblättern und Vorwärtsblättern per Mausklick ist jederzeit möglich.

Entscheiden Sie selbst, ob Ihre Bilder Ihnen diesen Aufwand wert sind.

Und so sieht's dann aus:

Bilder aus der Fränkischen Schweiz

Fotos auf Ihrer Website? So präsentieren Sie Ihre Bilder übersichtlich!

Workshop Diashow: Dia-Schau einrichten nur mit HTML: