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

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…