Sie erfahren gleich, welche weiteren Optionen Sie für Ihre Diashow haben. Jetzt erst einmal soll die Diashow etwas gestaltet werden. Die Bilder sollen gerahmt werden.

Per CSS wird ein Rahmen für die Bilder definiert.

Dafür ergänzen Sie im head-Bereich vor den JavaScript-Zeilen folgenden CSS-Code:

<style type="text/css">
#bilder {
  width:  430px;
  height: 292px;
  margin: 20px 5px;
}
#bilder img {
  padding: 15px;
  border:  1px solid #ccc;
  background-color: #eee;
  width:  400px;
  height: 262px;
}</style>

Wichtig ist, dass Sie den Bildern selbst sowie den Bildcontainern eine explizite Breite und Höhe geben. Damit stellen Sie sicher, dass die Diashow gut funktioniert. Hier tragen Sie natürlich die für Ihre Bilder passenden Werte ein.

Außerdem erhalten die img-Elemente im Beispiel noch durch Innenabstand (padding), Hintergrundfarbe und Rahmen (border) eine schöne Hervorhebung.