Produktionsprinzip
Das Prinzip des Bildwechsels ist das Werkzeug „Bild tauschen“, das auf das Verhaltensfenster in Dreamweaver angewendet wird. Stellen Sie es so ein, dass, wenn sich die Maus über ein bestimmtes Schaltflächenbild bewegt, die Schaltfläche selbst einen Bildaustausch durchführen soll (in ein Bild mit gelbem Text umgewandelt) und gleichzeitig den Austausch von Zeigerbildern (in einen Zeiger, der auf zeigt) gestaltet das aktuelle Button-Zeigerbild), um den oben genannten Effekt zu erzielen.
^-^: Tatsächlich scheinen einige Dinge auf der Webseite sehr mysteriös zu sein, aber im Grunde ist es nur eine einfache Änderung einiger Bilder oder einiger Ebenen.
Bastelmaterialien
Was hier gezeigt wird, ist das Umdrehen von 7 Schaltflächenbildern. Wir müssen also insgesamt 21 Bilder, 14 Schaltflächenbilder und 7 Zeigerbilder, erstellen, um den gezeigten Effekt zu erzielen. Darunter sind 7 vordere Tastenbilder mit den Namen B1-1~B1-7, 7 Hintergrund-Schaltflächenbilder mit den Namen B2-1~B2-7 und 7 Zeigerbilder mit den Namen Z1~Z7 versehen, und ihre Zeiger zeigen auf Tasten eins bis sieben. Sie können eine Bilderstellungssoftware wie Fireworks verwenden, um Schaltflächenbilder zu erstellen.
Zubereitungsmethode
1. Erstellen Sie eine Webseitendatei.
2. Fügen Sie eine 7×2-Tabelle ein und führen Sie die linke Tabellenspalte zusammen, um das Zeigerbild einzufügen. Die sieben Tabellen auf der rechten Seite dienen zum Einfügen von Schaltflächenbildern.
3. Fügen Sie das erste Zeigerbild Z1 in die Tabelle links ein und fügen Sie die blauen Fronttasten B1-1 ~ B1-7 in die 7 Zellenreihen rechts ein (der Effekt ist in Abbildung 2 dargestellt).
4. Klicken Sie auf „Fenster (Windows) → Verhalten“, um das Verhaltensfenster aufzurufen.
5. Wählen Sie das erste Bild aus, um das Verhalten festzulegen. Hier ist das Schaltflächenbild mit der Aufschrift „Guiding Idea“, also Bild B1-1.
6. Klicken Sie auf die Plus-Schaltfläche und wählen Sie im Popup-Menü die Option „Bild austauschen“, um das Dialogfeld „Bild austauschen“ aufzurufen. Der Hauptteil unserer Einstellungen wird in diesem Dialogfeld vorgenommen.
7. Klicken Sie im Dialogfeld auf die Schaltfläche „Durchsuchen“ und wählen Sie dann das Zielbild aus, in das das Schaltflächenbild gespiegelt werden soll. In diesem Fall ist es das Schaltflächenbild mit gelbem Text, nämlich Bild B2-1. Klicken Sie dann auf OK.
8. Wiederholen Sie Schritt 6, wählen Sie das Zeigerbild Z1 im Textfeld des Bildes aus und klicken Sie dann erneut auf die Schaltfläche „Durchsuchen“, um zur ersten Zeigerdatei Z1 zu wechseln. Klicken Sie auf OK. Nach Abschluss der oben genannten Vorgänge sind die Anzeigeergebnisse im Verhaltensbereich in Abbildung 3 dargestellt.
9. Wählen Sie das zweite Schaltflächenbild B1-2 aus, spiegeln Sie es gemäß der oben beschriebenen Methode in die Schaltfläche B2-2 und spiegeln Sie das Zeigerbild in das zweite Zeigerbild Z2.
10. Befolgen Sie die oben genannten Schritte und stellen Sie die folgenden 5 Bilder auf das Verhalten beim Bildaustausch ein.
11. Drücken Sie F12, um eine Vorschau anzuzeigen, und bewegen Sie den Mauszeiger über jedes Bild. Es fühlt sich doch gut an, oder?