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

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…
News
Video
SciFi-Action mit Ryan Gosling und Harrison Ford
Video
Agatha-Christie-Verfilmung mit Johnny Depp
Video
Kinostart: 23.11.2017