Effektvolle Bilder

CSS-Trick: Slideshow mit opacity selbst erstellen

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

Javascript-Slideshow

© Archiv

Die vorgestellte Slideshow ist äußerst kompakt und daher auch für beschränkte Platzverhältnisse bestens geeignet.

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

© Archiv

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

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".