So erstellen Sie einen Rollover-Bildeffekt

Was du brauchen wirst

Um einen Rollover-Effekt auf Ihre Bilder zu erzielen, sollten Sie keine besonderen Fähigkeiten besitzen. In dieser kurzen Anleitung werden wir herausfinden, wie es erreicht wird.

Zunächst benötigen Sie zwei Bilder mit den gleichen Abmessungen. Zu diesem Zweck können Sie Photoshop oder einen anderen Grafikeditor verwenden. Bitte beachten Sie, dass die Größe der Bilder optimiert werden sollte, wenn die Seiten schnell geladen werden sollen.

Übrigens haben wir einen neuen Abonnementdienst namens ONE gestartet . ONE by TemplateMonster bietet Ihnen eine erstaunliche Gelegenheit, die besten Vorlagen, Themen, Plugins usw. für nur 19 US-Dollar pro Monat zu erhalten! Alles, was Sie tun müssen, ist, ONE zu abonnieren und die Vielfalt der unbegrenzten Artikel aus EINEM Paket zu genießen. Keine Grenzen und keine Einschränkungen! Folgen Sie dem Link HTML-Vorlagen , um herauszufinden, welche Elemente im Paket enthalten sind. Möchten Sie beim Abonnieren noch mehr Geld sparen? Dann sollten Sie ein MonsterPost-Leser sein. Diese Glücklichen erhalten mit dem Promo-Code BecomeThe1 einen Rabatt von 5% .

Die Möglichkeiten, den Effekt zu erzeugen

Es gibt verschiedene Möglichkeiten, den Rollover-Effekt für Ihre Bilder auf einer Webseite zu erstellen. Sie können es nur mit Javascript oder nur mit CSS oder HTML erstellen.

HTML-basierte Methode

Wenn Sie nur HTML verwenden, können Sie keinen Übergang hinzufügen. Wenn Sie jedoch die richtigen Umstände haben, unter denen Sie den Übergang nicht benötigen, können Sie den folgenden Weg wählen. Hier ist ein Beispiel für HTML-Code mit einem Rollover:

wo:

• Das Attribut ’src‘ deklariert das Originalbild
• Das Ereignis ‚onmouseover‘ gibt das Bild an, das angezeigt wird, wenn Sie den Mauszeiger über das Original bewegen
• Das Ereignis ‚onmouseout‘ zeigt das Bild an, das angezeigt wird, nachdem das Schwebebild noch nicht aktiv ist (dh wenn der Zeiger von ihm entfernt wird).

Wie Sie sehen, ist dieser Weg recht einfach, aber es gibt keine Möglichkeit, den Rollover-Effekt glatt zu machen.

CSS-basierte Methode

Der zweite Weg beschreibt den Rollover-Effekt, der mit Stilen ausgeführt wird:

Dieser Vorgang ist auch ziemlich einfach. Das Hintergrundbild des Blocks wird beim Schweben geändert, aber der sanfte Übergang macht ihn attraktiver, nicht wahr?

Dieselben Techniken werden zum Erstellen der Überlagerungseffekte in TemplateMonster-  Websitevorlagen verwendet .

JS-basierte Methode

Die dritte Methode, die Sie als Beispiel zeigt, wird mithilfe des Skripts erstellt:

Nicht so einfach wie die beiden vorherigen, aber es funktioniert auch 🙂

Meine Wahl

Aus meiner Sicht würde ich lieber die CSS-Methode verwenden. Es ist so einfach wie zuverlässig. Darüber hinaus würde ich als ehemaliger Entwickler sagen, dass alles, was mit CSS gemacht werden kann, mit CSS gemacht werden sollte!

Hinterlassen Sie Ihre Kommentare, wenn Sie damit nicht einverstanden sind, und wenn Sie dies tun – bewerten Sie diesen Beitrag einfach mit so vielen Sternen wie möglich 😉

FAQ

Was ist ein Rollover-Bildeffekt?

Es ist ein visueller Effekt, wenn ein Bild das andere ersetzt, wenn der Benutzer mit dem Zeiger darüber fährt.

Wofür wird dieser Effekt verwendet?

Der Rollover-Effekt eignet sich hervorragend, um einige für den Benutzer nützliche Informationen anzuzeigen. Beispielsweise kann der Preis eines Objekts angezeigt werden, wenn der Benutzer darauf achtet.

Benötige ich eine spezielle Software, um einen Rollover-Bildeffekt zu erstellen?

Nein, wenn Sie einen solchen Effekt erstellen möchten, verfügen Sie über alle Instrumente, die Sie zum Erstellen benötigen.