Javascript: Animiertes MouseOver

Kein Beitragsbild

Dirk Metzmacher

Dirk Metzmacher ist der Herausgegeber des Photoshop-Weblogs, sowie Fachjournalist und Photoshop-Profi, dessen...

Grafiken, die mit Javascript und dem Befehl mouseover ausgewechselt werden, sieht man oft. Kombinieren Sie diese Möglichkeit mit einer Gif-Animation.

In diesem Beispiel zeige ich Ihnen einen weichen Übergang von einem zum anderen Bild (Live-Demo). Sie müssen dazu zwei Bilder anfertigen. Das Erste hat hier keine Animation und zeigt den Button in der Grundstellung. Das Zweite enthält die Animation des Übergangs und wird dazu nur einmal abgespielt, um dann in der zweiten Version zu enden.

Schritt 1:
Das folgende Bild erstellen Sie mit dem Grafikprogramm Ihres Vertrauens und speichern es als Grundlage ab. Photoshop und andere professionelle Grafikprogramme haben verschiedene Ebenen. Es ist von Vorteil die Schrift auf einer eigenen Ebene abzulegen. Speichern Sie das Bild als Gif ab. Öffnen Sie nun wieder die Grundlage.

Abbildung
Grundlage

Schritt 2:
Erstellen Sie eine neue Ebene und füllen Sie diese mit der Hintergrundfarbe. Zeichnen Sie mit der kleinsten Werkzeugspitze weiße Streifen wie im Beispiel zu sehen und kopieren Sie den Text (Farbe wie Hintergrund/ abändern!). Verschieben Sie die Text-Kopie über allen Ebenen. Photoshop bietet die Möglichkeit den Ebenenmodus von Normal auf Sprenkeln umzustellen. Das bewirkt das die Ebene “zerbröselt” dargestellt wird. Stellen Sie die Deckkraft in Photoshop auf 35%.

Abbildung
Textebene unkenntlich

Schritt 3:
Auf einer neue Ebene (mit weiß gefüllt) zeichnen Sie Linien in der Hintergrundfarbe. Kopieren Sie die Original-Textebene (Farbe wie Hintergrund/ abändern!) und verschieben Sie diese über allen anderen Ebenen. Erstellen Sie eine Ebene über dieser und zeichnen Sie genau an der Schnittstelle von Text und Hintergrundstreifen weiße Linien.

Abbildung
Gestreift

Schritt 4:
Am Ende der Animation soll der Text auf weißem Grund liegen, also erstellen Sie noch eine Ebene mit dem passenden Text.

Abbildung
Endposition

Mit dieser Grafikdatei ist es nun kein Problem mehr in ImageReady oder einem ähnlichen Programm eine Gif-Animation zu erstellen. Dieses Bild wird erst beim mouseover angezeigt:

Abbildung
Animation/das zweite Bild (hier unendlich)

Das folgende Bild sieht man bei einem inaktiven Button:

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht
Abbildung
Das erste Bild

Viele unterschiedliche Kombinationen von Farbe, Animation oder Form sind möglich. Sie können auch andere Animationen für onmouseout oder onclick einsetzen!

Dirk Metzmacher

Dirk Metzmacher ist der Herausgegeber des Photoshop-Weblogs, sowie Fachjournalist und Photoshop-Profi, dessen Tutorials seit über 12 Jahren Leser von Fachpublikationen wie Galileo Press, DigitalPhoto, Dr.Web, Print24, PSD-Tutorials oder Noupe von den Grundlagen zum Thema Photoshop bis hin zu professionellen Arbeitsweisen begleitet haben. Sein Twitter-Account und seine Facebookseite.