Rollovers In Adobe Dreamweaver CS3

Dieses Tutorial ist so aufgebaut, dass der Anwender mehr Kontrolle und Flexibilität mit Hilfe der Dreamweaver CS3 Schnittstelle zur Erstellung von Image-mouseovers. Es wird auch lehren, wie Sie die Mouseover-Bild Ziel irgendwo sonst auf der Web-Seite und dann einen Mouseover CSS Stil der ursprünglichen mouseover-Taste.

Teil 2 Zeigt, wie Sie Pop-Up-Swf Videos in Ihre Web-Seite mit einigen geringfügigen Veränderungen des eingebauten Funktionen in Dreamweaver CS3.

Abraham chaffin creativecow.net, Cambria, Kalifornien, USA © 2007 creativecow.net. Alle Rechte vorbehalten.

Teil 2

Movie 1 Movie 2 Movie 3

Das Ziel dieses Tutorials ist, um ein Video, wenn Sie ein Element Rollover. Wir starten, indem Sie die CSS-Klassen zuweisen, dass wir in den Platzhalter div in diesem Tutorial.

1) in der CSS-Fenster klicken Sie auf die "neue CSS-Regel"-Symbol. Selektor-Typ wird als "Klasse", Rufen Sie den Namen der Klasse "movinvis", und es sollte zu diesem Dokument nur.

2) in die CSS-Regel-Definition-Fenster wählen Sie die "Positionierung" Kategorie und die Position Art zu den absoluten, Sichtbarkeit zu versteckten, Und die z-index zu 999. (absolute Positionierung macht die Klasse nicht Push andere Elemente um sie, Und einen höHiern z-Index wird die Klasse auf der anderen Elemente.) Drücken Sie OK.

3) wieder eine neue CSS-Regel die gleichen wie in den Schritten 1 und 2 nur die Namen der Klasse "movvis", und stellen Sie die Sichtbarkeit zu sichtbaren.

4) Legen Sie eine neue div, indem Sie auf das Menü Einfügen Layout-Objekte div-Tag. Nicht jede Eigenschaften für das div noch, und drücken Sie OK.

5) Wählen Sie die neu erstellte div und in der Eigenschaften-Fenster die div id auf "movtarget" und die Klasse "movinvis".

Jetzt, dass die Platzhalter div Setup ist auf unserer Filme wir die Tasten, die verwendet werden für die Rollovers. Diesem Zeitpunkt werden wir der Einfachheit halber nur aus Text.

6) stellen Sie den Cursor über die div unsichtbar, und geben Sie "Film 1" wählen Sie den Text, Und machen es zu einem Hyperlink. Die "#", wie der Dateiname oder URL. (Sie können diesen Schritt wiederholen, um die Rollovers für "Film 2" und "Movie 3"

Als nächstes werden wir legen Sie die Filme, die wir wollen, um auf die div mit der Rollover-Links. Dann werden wir weise sie dem div onmouseover unserer Links. Schließlich werden wir die Klassen zuweisen onmouseover und onmouseout, so dass die div ist nur sichtbar, wenn ein Film wird angezeigt.

7) Gehen Sie zum Menü "Einfügen" Medien Flash und wählen Sie rollover1.Swf. Drücken Sie OK.

8) Wählen Sie die neu eingefügten Flash Video-, und gehen Sie zum Menü "Ansicht" Code. Wählen Sie den Code zwischen den noscript und / noscript -Tags und kopieren Sie sie in Ihre Zwischenablage eingefügt werden, um später.

9) Gehen Sie zurück zu Entwurfsansicht, indem Sie auf Ansicht Design. Wählen Sie die Flash Video-und löschen.

10) Wählen Sie die Option "Film 1" Link und im Verhalten Fenster drücken Sie die (+)-Taste hinzufügen Verhalten. Wählen Sie Text set Text des Behältnisses. Wählen Sie den Container div "movtarget" und fügen Sie den kopierten Code in das neue html Feld.

11) Stellen Sie sicher, dass das Verhalten wurde auf den onmouseover Veranstaltung zu diesem Effekt. Wenn es nicht können Sie ändern, indem Sie auf das Ereignis und wählen Sie aus der Dropdown-onmouseover.

12) mit dem "Film 1" Link noch ausgewählt (+) ein weiteres Verhalten als "Eigenschaft ändern". Stellen Sie sicher, dass die Art von Element ist die "div", Und Element-ID div "movtarget". Wählen Sie die "Enter:"Radio für die Eigenschaft und geben Sie" classname ". Geben Sie "movvis" für den neuen Wert ein und drücken Sie OK. Stellen Sie sicher, dass dieses Verhalten ist für die Veranstaltung onmouseover, Wenn es nicht ändern.

13) Wiederholen Sie Schritt 12 nur den neuen Wert zuweisen, wie "movinvis" und ordnen Sie die Maßnahme an die Veranstaltung onmouseout.

14) Wiederholen Sie die Schritte 7-13, um "Film 2" und "Movie 3".

Jetzt werden wir einen Hack auf der DW, dass JavaScript verwendet für die Änderung Eigenschaft, dass es in der Weise, dass wir ihn für die Klassen ändern.

15) gehen auf das Menü "Bearbeiten" "Suchen und ersetzen. Finden Sie in "Dokument", Suche "Quellcode", Finden "obj.Stil.", Ersetzen "obj.", Und ersetzen Sie die zwei Instanzen von diesem in der JavaScript-Code.

Sie sollten in der Lage zu retten und eine Vorschau Ihrer Arbeit jetzt, um zu sehen, was Sie getan haben. Diese Technik kann in Verbindung mit einer Positionierung Skript, um die SWF-Position, wo Sie wollen, dass es. Oder Setup verschiedenen divs, wo Sie wollen, dass die besonderen Filme und Ziel der Veranstaltung zu gehen. Es gibt andere Wege, um diesem Effekt, aber das ist eine etwas gehackt Weg, um es mit einfachen Funktionen direkt in Dreamweaver CS3.