Effektvolle Bilder

Teil 2: CSS-Trick: Slideshow mit opacity selbst erstellen

Vorschaubilder scrollen

Wenn sich der Kursor über den Vorschaubildern befindet, prüfen wir, ob sie gescrollt werden sollen. Zu diesem Zweck werden am rechten und linken Rand zwei kleine, transparente Pfeil-Icons über die Bilder gelegt. Beim Kontakt mit dem Mauszeiger sorgen diese Icons dafür, dass sich die Vorschaubilder in die jeweilige Richtung bewegen:

function initSlide(e) {
var obj = e ? e.target.id : window.
event.srcElement.id;
var icon;
if(obj == "leftslider") {
icon = document.getElementById(obj);
icon.style.backgroundPosition =
"0 0";
slide(3);
}
else if(obj == "rightslider") {
icon = document.getElementById(obj);
icon.style.backgroundPosition =
"0 -64px";
slide(-3);
}
if(icon) {
icon.onmouseout = function() {
stopSlide(icon);
}
}
}

Der Funktion initSlide() wird der Mausevent e übergeben. Das kann man ausnützen, um das mit der Maus anvisierte Element zu finden.

e.target beziehungsweise event.srcElement gibt jenes Objekt zurück, über dem sich der Mauszeiger gerade befindet. Da wir die IDs der beiden gesuchten Objekte kennen, müssen wir also prüfen, ob die ID mit einem zurückgegebenen Objekt übereinstimmt.

Die IDs leftslider und rightslider verweisen auf span-Elemente mit einem eingebundenen Hintergrundbild. Bei diesem Bild handelt es sich um ein Sprite. Das ist eine einzige Grafik-Datei, auf der alle benötigten Icons abgebildet sind. Die Vorteile dieser Technik sind vergleichbar mit Image-Maps.

Statt mehrerer kleiner Bilder ist nur eines erforderlich, und der jeweils angezeigte Ausschnitt wird per CSS definiert. Soll ein Icon gewechselt werden, braucht man also nur die Position des Hintergrundbildes zu verschieben.

Dies geschieht, sobald der Mauszeiger eines der beiden Icons berührt. Mit einer positiven oder negativen Zahl als Argument rufen Sie zudem slide() auf. Durch die Zahl bestimmen Sie Anzahl der Pixel, mit der die Vorschaubilder nach rechts oder links gescrollt werden.

Der Code der einfachen Funktion stopSlide() wird hier aus Platzgründen nicht angeführt. Sie tritt bei Mouseout in Aktion und dient lediglich dazu, den in slide() eingeleiteten Timeout zu löschen und die Pfeil-Icons zur ursprünglichen Position zurückzuverschieben. Die slide()-Funktion sieht so aus:

function slide(diff) {
xdir += diff;
if(xdir < -1000) xdir = -1000;
if(xdir > 300) xdir = 300;
document.getElementById
('inner_thumbs').style.left = xdir + 'px';
timer = setTimeout('slide('+ diff +
')', 30);
}

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​".