Fotoalbum

Bearbeiten Sie nacheinander die folgenden Lösungsvorschläge.

1) HTML Spezialist / Javascript Noob

  • Erstellen Sie eine ansprechende HTML-Seite mit 4 Fotos (kein Javascript-Anteil)
Voraussetzungen:
  • HTML (img-Tag, links etc.)

2) Anfänger: Die Switch-Lösung

  • Erstellung Sie eine HTML-Seite mit einem Foto.
  • Bei Anklicken des Fotos wird ein weiteres Foto angezeigt usw.
  • Bei Anklicken des letzten Fotos wird das erste Foto angezeigt.
  • Eine Switch Anweisung wertet den aktuellen Namen der Fotodatei aus und sorgt dafür dass das Foto ausgetauscht wird gegen die folgende Fotodatei.
  • Nach Anzeige des letzten Fotos wird mit dem ersten Foto fortgefahren.
Voraussetzungen:
  • HTML, Variablen, Funktionen, switch-Anweisung

3) Fortgeschrittene: Die Array-Lösung

  • Schreiben Sie die Namen der anzuzeigenden Fotos in ein Array.
  • Nutzen Sie Dateinamen aus einem Array bei der Anzeige, indem Sie die Felder adressieren, z.B. foto[4] anstatt fest vergebene Dateinamen zu verwenden.
Voraussetzungen:
  • HTML, Variablen, Funktionen, Arrays

4) Freaks: Die Timer-Lösung

  • Modifizieren Sie die letzte Lösung so, dass Sie eine Diashow starten können!
    • Ergänzen Sie den Quelltext um einen Timer, welcher im vorgegebenen zeitlichen Abstand die Funktion zur Anzeige des nächsten Bildes aufruft.
    • a) Ergänzen Sie die Seite um einen onload-Eventhandler im body-Tag zum Starten der Diashow!
    • b) Ergänzen Sie eine Eingabe für die Zeit, welche jedes Bild angezeigt werden soll.

5) Diashow mit Background-Fotos

  • Ändern Sie Ihre Lösung so, dass die Fotos als Backgroundbilder der Seite angezeigt werden!

6) Überblendung der Fotos

  • Ohne Überblendung nervt eine Diashow nach einiger Zeit. Realisieren Sie sanfte Übergänge!

Infos

Beispiel für den Umgang mit Arrays: http://www.html-world.de/forum/viewtopic.php?t=754

























Lösungsvorschläge

Die folgenden Fotos benötigen Sie für die bereitgestellten Lösungen: Fruechte-Download.

1) Eine einfache HTML-Seite mit ein paar Fotos

<!DOCTYPE html>
<html>
 
<head>
  <title>Fotoalbum - 1</title>
  <meta charset="utf-8">
  <style>
    img
    {
      width: 220px;
    }
    div
    {
      width: 500px;
      margin: auto;
    }
  </style>
</head>
 
<body>
  <div>
      <img src="fruechte/Apfel.jpg" alt="Apfel">
      <img src="fruechte/Zitrone.jpg" alt="Zitrone">
      <img src="fruechte/Erdbeere.jpg" alt="Erdbeere">
      <img src="fruechte/Orange.jpg" alt="Orange">
      <img src="fruechte/Blaubeere.jpg" alt="Blaubeere">
   </div>
</body>
 
</html>
 

2) Nacheinander Fotos anzeigen durch Anklicken / Switch-Lösung

<!DOCTYPE html>
<html>
 
<head>
  <title>Fotoalbum - 2</title>
  <meta charset="utf-8">
  <style>
    img
    {
      width: 220px;
    }
    div
    {
      width: 500px;
      margin: auto;
    }
  </style>
  <script>
 
    var bild=0;
 
    function next()
    {
      // Zurücksetzen auf das erste Bild, wenn
      // zuletzt das letzte Bild angezeigt wurde.
      if(bild>3)
      {
        bild=0;
      }
 
      switch( bild )
      {
        case 0:
        {
          document.getElementById("meinbild").src="fruechte/Apfel.jpg";
          document.getElementById("meinbild").alt="Apfel";
          break;
        }
        case 1:
        {
          document.getElementById("meinbild").src="fruechte/Erdbeere.jpg";
          document.getElementById("meinbild").alt="Erdbeere";
          break;
        }
        case 2:
        {
          document.getElementById("meinbild").src="fruechte/Orange.jpg";
          document.getElementById("meinbild").alt="Orange";
          break;
        }
        case 3:
        {
          document.getElementById("meinbild").src="fruechte/Blaubeere.jpg";
          document.getElementById("meinbild").alt="Blaubeere";
          break;
        }
        default:
        {
          // Fehlerbehandlung:
          // Wenn das oben nicht richtig funktioniert,
          // d.h. die Variable bild einen Wert zwischen 0 und 3 besitzt,
          // dann wird wenigstens eine Zitrone angezeigt.
          document.getElementById("meinbild").src="fruechte/Zitrone.jpg";
          document.getElementById("meinbild").alt="Blaubeere";
        }
      }
      bild++;
    }
  </script>
</head>
 
<body>
 
  <div>
    <img id="meinbild" src="fruechte/Blaubeere.jpg" alt="Blaubeere" onclick="next()">
  </div>
 
</body>
 
</html>
 
 

3) Nacheinander Fotos anzeigen unter Verwendung von Arrays

<!DOCTYPE html>
<html>
 
<head>
  <title>Fotoalbum - 3</title>
  <meta charset="utf-8">
  <style>
    img
    {
      width: 220px;
    }
    div
    {
      width: 500px;
      margin: auto;
    }
  </style>
  <script>
 
    var bilder=new Array("Apfel","Erdbeere","Orange","Blaubeere","Zitrone");
    var bild=0;
 
    function next()
    {
      // Zurücksetzen auf das erste Bild, wenn
      // zuletzt das letzte Bild angezeigt wurde.
      if(bild>4)
      {
        bild=0;
      }
      // Array verwenden entsprechend Wert der Variable bild
      document.getElementById("meinbild").src="fruechte/"+bilder[bild]+".jpg";
      document.getElementById("meinbild").alt=bilder[bild];
      bild++;
    }
 
    </script>
</head>
 
<body>
 
  <div>
    <img id="meinbild" src="fruechte/Zitrone.jpg" alt="Zitrone" onclick="next()">
  </div>
 
</body>
 
</html>
 
 

4) Diashow mit IntervalTimer

a)
<!DOCTYPE html>
<html>
 
<head>
  <title>Fotoalbum - 4</title>
  <meta charset="utf-8">
  <style>
    img
    {
      width: 220px;
    }
    div
    {
      width: 500px;
      margin: auto;
    }
  </style>
  <script>
 
    var bilder=new Array("Apfel","Erdbeere","Orange","Blaubeere","Zitrone");
    var bild=0;
 
    function diashow()
    {
      setInterval(next, 3000);
    }
 
    function next()
    {
      // Zurücksetzen auf das erste Bild, wenn
      // zuletzt das letzte Bild angezeigt wurde.
      if(bild>4)
      {
        bild=0;
      }
      // Array verwenden entsprechend Wert der Variable bild
      document.getElementById("meinbild").src="fruechte/"+bilder[bild]+".jpg";
      document.getElementById("meinbild").alt=bilder[bild];
      bild++;
    }
 
  </script>
</head>
 
<body onload="diashow()">
  <div>
    <img id="meinbild" src="fruechte/Zitrone.jpg" alt="Zitrone" onclick="next()">
  </div>
</body>
 
</html>
 
b)
<!DOCTYPE html>
<html>
<head>
  <title>Fotoalbum - 5</title>
  <meta charset="utf-8">
  <style>
    img
    {
      width: 220px;
    }
    div
    {
      width: 500px;
      margin: auto;
    }
  </style>
  <script>
 
    var bilder=new Array("Apfel","Erdbeere","Orange","Blaubeere","Zitrone");
    var bild=0;
    var timId;      // die ID des laufenden Timers oder undefined
    var sekunden=3; // alle 3 Sekunden soll ein neues Bild gezeigt werden
 
    function diashow()
    {
      console.log(timId);
 
      // Wenn bereits ein Timer läuft dann erst einmal stoppen
      if( timId != undefined )
      {
        clearInterval(timId);
      }
 
      sekunden=parseFloat(document.getElementById("zeitabstand").value);
      timId=setInterval(next, sekunden*1000);
    }
 
    function next()
    {
      // Zurücksetzen auf das erste Bild, wenn
      // zuletzt das letzte Bild angezeigt wurde.
      if(bild>4)
      {
        bild=0;
      }
      // Array verwenden entsprechend Wert der Variable bild
      document.getElementById("meinbild").src="fruechte/"+bilder[bild]+".jpg";
      document.getElementById("meinbild").alt=bilder[bild];
      bild++;
    }
 
  </script>
</head>
 
<body onload="diashow()">
  <div>
     Sekunden:
     <input type="text" id="zeitabstand" value="3" onchange="diashow()" value="3"><br>
     <img id="meinbild" src="fruechte/Zitrone.jpg" alt="Zitrone" onclick="next()">
  </div>
</body>
 
</html>

5) Diashow mit Background-Fotos

<!DOCTYPE html>
<html>
 
<head>
  <title>Fotoalbum - 6</title>
  <meta charset="utf-8">
  <style>
    body
    {
      font-family:       sans-serif;
      font-size:         2em;
      color:             white;
      background-color:  #888888;
      background-image:  url(fruechte/Zitrone.jpg);
      background-size:   cover;
      background-repeat: no-repeat;
    }
    input
    {
      color:             white;
      font-family:       sans-serif;
      font-size:         1em;
      background-color:  #888888;
    }
  </style>
  <script>
 
    var bilder=new Array("Apfel","Erdbeere","Orange","Blaubeere","Zitrone");
    var bild=0;
    var timId;      // die ID des laufenden Timers oder undefined
    var sekunden=3; // alle 3 Sekunden soll ein neues Bild gezeigt werden
 
    function diashow()
    {
      console.log(timId);
      // Wenn bereits ein Timer läuft dann erst einmal stoppen
      if( timId != undefined )
      {
        clearInterval(timId);
      }
 
      sekunden=parseFloat(document.getElementById("zeitabstand").value);
      timId=setInterval(next, sekunden*1000);
    }
 
    function next()
    {
      var datei;
      // Zurücksetzen auf das erste Bild, wenn
      // zuletzt das letzte Bild angezeigt wurde.
      if(bild>4)
      {
        bild=0;
      }
      // Array verwenden entsprechend Wert der Variable bild
      datei="fruechte/"+bilder[bild]+".jpg";
      document.getElementById("meinbild").style.backgroundImage = "url("+ datei +")";
      bild++;
    }
 
  </script>
 
</head>
 
<body id="meinbild" onload="diashow()">
     Anzeige-Intervall: <input type="text"
                               id="zeitabstand"
                               value="3"
                               onchange="diashow()"
                               size="2"
                               maxlength="2">
</body>
 
</html>
 
6) Überblendung der Fotos
...