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 lesen

Chronologische Liste und Netflix-Links -

Neuerscheinungen in der Übersicht -

Vorschau auf Film- und Serien-Highlights -

Mehr zum Thema

Webdesign

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

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

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.
Online-Recht in der Cloud

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

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