Effektvolle Bilder

CSS-Trick: Slideshow mit opacity selbst erstellen

30.11.2009 von Redaktion pcmagazin

Erstellen Sie eine elegante Slideshow, ausgestattet mit einem interessanten Ein- und Ausblendeffekt. Dazu wird die CSS-Eigenschaft opacity genutzt.

ca. 2:00 Min
Ratgeber
  1. CSS-Trick: Slideshow mit opacity selbst erstellen
  2. Teil 2: CSS-Trick: Slideshow mit opacity selbst erstellen
  3. Teil 3: CSS-Trick: Slideshow mit opacity selbst erstellen
  4. Teil 4: CSS-Trick: Slideshow mit opacity selbst erstellen
Javascript-Slideshow
Die vorgestellte Slideshow ist äußerst kompakt und daher auch für beschränkte Platzverhältnisse bestens geeignet.
© Archiv

Erstellen Sie eine elegante Slideshow, ausgestattet mit einem interessanten Ein- und Ausblendeffekt. Dazu wird die CSS-Eigenschaft opacity genutzt.

Professionalität für Ihre Slideshow: Wenn Sie den Mauskursor über das Hauptbild der Slideshow bewegen, erscheint am unteren Rand eine Reihe kleiner Vorschaubilder, die sich nach rechts und links scrollen lassen. Beim Anklicken eines der Vorschaubilder blendet sich das ausgewählte Hauptbild kontinuierlich ein, während zugleich das aktuelle Bild ausgeblendet wird.

Javascript-Slideshow
© Archiv

Möglich ist dieser Effekt mithilfe der CSS-Eigenschaft opacity, mit der sich die Transparenz von Elementen verändern lässt. Diese Eigenschaft wird inzwischen von allen Browsern unterstützt. Lediglich der Internet Explorer benötigt dafür die proprietäre Filter-Eigenschaft. Die Anweisung, den Alpha-Filter zu benutzen, wird jedoch von den anderen Browsern ignoriert, sodass in diesem Fall nicht mal ein eigener if-Zweig erforderlich ist. Die hier vorgestellte Slideshow läuft deshalb auf allen gängigen Browsern.

Show einleiten

Da das Script aus nicht wenigen Funktionen besteht, gehen wir vom onlaod-Event aus, um einen ersten Überblick zu erhalten:

window.onload = function() {
var thumbs = '<img usemap="#buttons"
src="allthumbs.jpg">';
document.getElementById
("inner_thumbs").innerHTML = thumbs;
var outer = document.getElementById
("outer_thumbs");
outer.onmouseover = initSlide;
var main = document.getElementById
("pics");
main.onmouseover = function() {
if(timer2) {
clearTimeout(timer2);
timer2 = null;
}
if(thOpacity <= 100)
fadeThumbs(20);
}
main.onmouseout = setClose;
view(4);
}

Der Event-Handler onload wird immer erst dann aktiv, nachdem das Dokument vollständig geladen wurde. Dem Browser ist zu diesem Zeitpunkt also bereits die gesamte Struktur des Dokuments bekannt. Damit alle Elemente wie gewünscht dargestellt werden, müssen sie auf bestimmte Weise verschachtelt sein. Bei dem Element mit der ID pics handelt es sich um das äußerste div-Element, das sämtliche weiteren Elemente enthält.

Die beiden Event-Handler für Mouseover und Mouseout, die für dieses Element registriert werden, sorgen für die Sichtbarkeit und Unsichtbarkeit der Vorschaubilder. Beim Mouseover-Handler ist zu beachten, dass Sie einen eventuell laufenden Timeout löschen. Insgesamt werden drei unterschiedliche Timeouts benötigt.

Um sie einzeln unter Kontrolle zu behalten und, wenn nötig, abbrechen zu können, werden sie alle in separaten globalen Variablen gespeichert. Dies ist auch deshalb erforderlich, damit das Programm nicht von raschen Mausbewegungen aus dem Tritt gebracht werden kann.

Ein weiterer Mouseover-Handler bezieht sich auf das div-Element outer_thumbs, mit dem das Scrollen initialisiert wird. Dies ist ein Elternelement von inner_thumbs, in das die Vorschaubilder geladen werden. Für die Vorschaubilder verwenden wir eine Image-Map-Datei, die sämtliche Bildchen beinhaltet.Das hat den Vorteil, dass die Bilder um ein Vielfaches schneller geladen werden als viele kleine Einzelbilder, und die Anfragen an den Server entsprechend geringer sind. Die Image-Map-Datei fügen wir mittels innerHTML ins vorgesehene Element ein. Sind die Bilder durchnummeriert, können Sie nun dem Aufruf von view() die Nummer desjenigen Bildes übergeben, das beim Laden der Seite angezeigt werden soll.

Javascript-Slideshow
Grundlagen zum Erstellen einer Image-Map finden Sie bei ihip.com/cside.html.
© Archiv

Mehr lesen

Chronologische Liste und Netflix-Links

Marvel-Filme- und -Serien: Das ist die richtige Reihenfolge

Neuerscheinungen in der Übersicht

Netflix: Neue Filme und Serien

Vorschau auf Film- und Serien-Highlights

Amazon Prime Video: Neuheiten

Weiter zur Startseite  

Mehr zum Thema

internet, webdesign, adobe,  Illustrator, CS6

Webdesign

Webdesign in Adobe Illustrator CS6

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.

Facebook stellte die neue Suche

Facebook

Facebooks Social Graph Search

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?

Der BGH erklärt das Internet zur Lebensgrundlage.

Online-Recht

Darauf müssen Sie bei den AGB achten

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.

Online-Urheberrecht: Unser Ratgeber bietet Tipps für das Cloud-Recht.

Online-Recht in der Cloud

Wie sieht das Urheberrecht in der Wolke aus?

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…

Logistik im E-Commerce: Prozesse rund um die Logistik.

E-Commerce-Logistik

Logistik im E-Commerce

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.