Touren - Tiere - Technik

Bildwechsel per Hover und per Klick

Zugegeben, diese Dinge muss man nicht unbedingt haben, aber sie können ein netter Gimmick sein. Wo es halt passt. Die Rede ist vom Bildtausch per CSS-Anweisung und/oder mittels eines kleinen Javascripts.

Bei diesem schwarz-weißen Bild fahren Sie mit der Maus in die Aufnahme, damit wieder Farbe ins Foto kommt.

Der Trick besteht letztlich darin, dass zwei gleich große Bilder übereinander gelegt werden. Zuoberst befindet sich die schwarz-weiße Aufnahme, darunter steckt die farbige. Fährt die Maus ins Bild, wird das obere sozusagen durchsichtig gemacht und das untere Bild wird sichtbar. Wie lange dieser Wandlungsprozess dauert, wird sekundengenau eingestellt. Hier sind es drei Sekunden.

Natürlich kann es auch witzig sein, wenn sich das Bild - egal welcher Färbung - in ein anderes Bild wandelt. Hier ist ein Beispiel:

Wichtig ist natürlich, dass beide Bilder die gleiche Größe haben. Die entsprechenden Angaben werden in einer CSS-Datei hinterlegt oder im Kopf der Seite notiert. Für jeden Bildwechsel müssen eigene CSS-Angaben gemacht werden.

Nach diesen Beispielen gibt es naturgemäß die Frage nach einem Bildertausch per Mausklick. Selbstredend geht auch das. Ein kleines Javascript macht's möglich. Klicken Sie auf das Bild, um zu sehen, wie das Haus mit diesen Fenstern von außen aussieht.

Das hier genutzte Script habe ich in den Header der Template-Datei eingebaut. Will man mehrere Bilder tauschen, dann muss das Script erweitert werden. Es geht auch ein Stück einfacher und damit flexibler - so man es braucht.

Ein Klick auf das Bild ändert es. Zurück geht es nicht, höchstens mit einem Seiten-Refresh. Man sollte sich schon genau überlegen, ob und bei welcher Gelegenheit man dieses Script einsetzt.

Damit sich der Betrachter den Refresh ersparen kann, habe ich hier mal mit dem gleichen Script einen Link gesetzt: Zurück zum Ausgangsbild

Zum Herumspielen

Auf das Icon klicken und die Scripte samt Bildern für eigene Spielereien herunterladen. Die ZIP entpacken und die HTML-Datei aufrufen. Dann die Erläuterungen lesen und herumklicken. Schließlich die Datei in einen Editor wie Notepad++ laden und die CSS-Anweisungen und Javascripte für eigene Zwecke kopieren und verändern.