Einfache und überzeugende JavaScript-Bildeffekte mit jQuery-Plugins

Effektvolle Diashow über Cycle

Diashow per CSS gestalten

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.

Mitglied werden, Vorteile nutzen!

  • Sie können alles lesen und herunterladen: Beiträge, PDF-Dateien und Zusatzdateien (Checklisten, Vorlagen, Musterbriefe, Excel-Rechner u.v.a.m.)
  • Unsere Autoren beantworten Ihre Fragen

Inhalt

Über die Autorin:

bild117864

Dr. Florence Maurice bietet Dienstleistungen im Webpublishing in Form von Fachtexten und Trainings (auch maßgeschneiderte Inhouse-Schulungen). Außerdem programmiert sie Webseiten. Ihre Themen: HTML, ...

Newsletter abonnieren