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

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

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);
}