Bild Rollovers
Was sind Rollovers?
Der Rollover-Effekt ist ein, in der ein Knopf oder Bild Web-Objekt oder eine Gruppe von ihnen, Veränderungen (Swaps selbst) auf der Maus auf einem anderen Web-Objekt (so genannte Rollovers) und auf der Maus aus zurück auf das Originalbild zurückkehrt. Rollover-Bilder werden in der Seite vorbelastet, wenn es geladen wird, wird sichergestellt, dass der Rollovers schnell angezeigt werden. Die onMouseOver und onMouseOut Attribute der Link-Tags werden verwendet, um diesen funktionsfähig zu machen. Zeigen Sie mit der Maus über die Buttons in Beispiel 1 und die Bilder in Beispiel 2, um ihren Rollover-Effekt zu sehen.
Wie funktionieren Prolongation Bilder?
Dieses Tutorial zeigt Ihnen, wie Rollover-Bilder oder Schaltflächen erstellen Fireworks oder Dreamweaver und somit voraus, dass Sie mit einigen Design-Software vertraut sind, auch wenn Sie neu in Adobe Fireworks oder Adobe Dreamweaver. Allerdings kann sicher sein, dass unsere detaillierte Anweisungen von selbst ein Anfänger folgen.
Rollovers in Fireworks
Erstellen Sie Rollover-Bilder
Nachdem Sie Ihr Design in Fireworks erstellen, gehen Sie folgendermaßen vor:
Schritt 1: Wenn Ihr Design ist alles in einer Schicht (zB „Layout“ im Bild 1) können Sie die Tasten oder Bilder zum ersten trennen müssen Auswirkungen auf eine andere Ebene zu erhalten und verriegeln Sie die zugrunde liegende Designschicht „Layout“, so dass es nicht ist gestört.
Schritt 2: Legen Sie die Anfang Tasten / Bild korrekt angezeigt werden und sie in einer separaten Ebene mit dem Namen „Knöpfe“ oder „Links“ in Bild 1 bewegen.
Schritt 3: Duplizieren Sie die Tasten / Bilder einmal Schicht. Doppelklicken Sie auf den neuen Ebenennamen und benennen Sie sie in „Rollovers“. Aktivieren Sie die „Share über Rahmen“ Option, die gesehen wird, während die Schicht zu benennen und dann außerhalb klicken. Sperren und unsichtbar machen die Tasten / Bilder Schicht. Auch „Anteil über Rahmen“ die „Layout“ Schicht, so dass die Rollovers korrekt funktionieren.
Schritt 4: In Schicht „Rollovers“, ändern Sie die Farbe / Wirkung der Rollover-Buttons oder Rollover-Bilder.
Schritt 5: Öffnen Sie das Bedienfeld Frames; Sie wird nur ein Rahmen genannt „Frame 1“ sehen. Duplizieren Sie einmal den Rahmen. Zurück zu den Ebenen Panel (stellen Sie sicher, dass Sie in dem Rahmen sind 1 und 2 nicht umrahmen bevor sie an den Schichten Platte zurück)
Schritt 6: Öffnen Sie die „Web-Ebene“ und legen getrennte Scheiben für alle Tasten / Bilder. Öffnen Sie das Bedienfeld Verhalten. Nun wählen Sie alle Rollover-Buttons / Bilder Scheiben und klicken Sie auf die Schaltfläche (+) im Bedienfeld Verhalten, wählen Sie Einfaches Rollover aus der Liste. Ein andere Möglichkeit, es zu tun ist, einzelne Scheiben auswählen, die rechte Maustaste und wählen Einfaches Rollover-Verhalten aus der Liste hinzufügen.
Gut gemacht! Sie wissen jetzt, wie Sie Ihre eigenen Rollover-Buttons und Rollover-Bilder unter Verwendung von Feuerwerk zu schaffen!
Rollovers in Dreamweaver
Erstellen Sie Rollover-Bilder
Führen Sie die folgenden Schritte, um Ihre eigenen attraktiven Prolongation Bildeffekte mit Dreamweaver zu erstellen:
Rollovers mit dem Behaviors Fenster. Alternative zu den oben genannten Schritten, die Sie auch Rollovers mit dem Bild austauschen Verhalten von dem eingebauten Behaviors von Dreamweaver erstellen können. Dies ist sehr nützlich, wenn Sie bereits Ihre Bilder gesetzt haben (mit ihren Links) auf der Seite.
So finden Sie das Verhalten des Swap-Bild geht auf Fenster> Verhalten. der Tag-Inspektor-Panel wird mit dem Button Aktionen zeigen, wie gedrückt. Klicken Sie einfach auf das Pluszeichen (+) angezeigt und Sie werden das Bild austauschen Verhalten aufgeführt. Klicken Sie darauf und ein Popup-Fenster fragt Sie das Bild auf Ihrer Seite wählen swaped und die Quelle des Swap-Bild werden. Wählen Sie diese und klicken Sie auf OK und Ihre Rollover-Bild der Dreamweaver-Bild austauschen Verhalten mit fertig!
Das ist es; Sie wissen nun, wie schnell Ihre eigenen Rollover-Buttons und Rollover-Bilder mit Dreamweaver erstellen!
- Erfahren Sie, wie die Swap-Bild-Effekt (im Grunde erweiterte Rollover-Bilder) in Fireworks oder Dreamweaver erstellen.
- Erfahren Sie, wie Text-Links Rollovers in unseren kühlen Texteffekte mit CSS Styles Tutorial zu machen.
Benötigte Software
Adobe Fireworks: Da dieses Tutorial eine Kernfunktion von Adobe Fireworks umfasst, jede Version wird es tun.