Wie man eine einfache Maus über das Bild in Dreamweaver erstellen
Dreamweaver CC für Dummies
Rollovers sind ein so beliebtes Feature, dass Dreamweaver ein Dialogfeld nur für Rollover-Effekte beinhaltet: das Insert Maus über das Bild im Dialogfeld. Rollover-Bilder, wie der Name schon sagt, sind so konzipiert, reagieren, wenn jemand einen Cursor auf ein Bild rollt. Der Effekt kann so dramatisch sein wie ein Bild von einem Hund durch ein Bild eines Löwen ersetzt, oder so subtil wie die Farbe eines Wort Wechsel.
Sie können komplexere Rollover-Bild-Effekte mit der Swap-Bild-Option aus dem Bedienfeld VERHALTEN erstellen. Das Swap-Bild-Option ermöglicht es Ihnen, mehrere Bilder gleichzeitig zu ändern.
Um einen einfachen Rollover-Effekt mit zwei Bildern mit Dreamweaver einfügen Bild Prolongation Dialogfeld zu erstellen, gehen Sie folgendermaßen vor:
Setzen Sie den Cursor auf der Seite, wo Sie die Rollover angezeigt werden soll.
Überschlagseffekte erfordern mindestens zwei Bilder: ein für den Anfangszustand und einen für den Überschlagszustand. Sie können zwei verschiedene Bilder oder zwei ähnliche verwenden, aber beide die gleichen Abmessungen haben sollte. Ansonsten sehen Sie seltsame Skalierungseffekte, da beiden Bilder in genau den gleichen Raum auf der Seite angezeigt werden müssen.
Wählen Sie Einfügen → Bild → Maus über das Bild.
Alternativ können Sie die Dropdown-Liste aus dem Bilder-Symbol zur Verfügung verwenden im Panel Gemeinsame Einfügen und wählen Bild Prolongation.
Das Insert Maus über das Bild Dialogfeld erscheint.
Im Bild Feld Name den Namen Ihres Bildes.
Bevor Sie ein Verhalten auf ein Element anwenden können, wie zum Beispiel ein Bild, muss das Element einen Namen haben, so dass das Verhalten Skript auf sie verweisen kann. Sie können Elemente alles, was Sie so lange wie Name, wie Sie verwenden keine Leer- oder Sonderzeichen.
Im Originalbild Feld die erste Bild, das Sie sichtbar werden sollen. Verwenden Sie die Schaltfläche Durchsuchen ausfindig zu machen und das Bild auswählen.
Im Bildfeld Mauszeiger bewegen, geben Sie das Bild, das Sie sichtbar werden soll, wenn ein Besucher den Mauszeiger über das erste Bild bewegt.
Auch hier können Sie über die Schaltfläche Durchsuchen, um das Bild zu suchen und auszuwählen.
Wählen Sie das Preload Maus über das Bild Kontrollkästchen alle Rollover-Bilder in den Browser-Cache zu laden, wenn die Seite geladen wird.
Im Alternate Textfeld eine Beschreibung der Bilder ein.
Alternativer Text ist optional, wird aber empfohlen, da die Verwendung von Keywords können Suchmaschinen-Optimierung verbessern. In ähnlicher Weise Alternativer Text ist ein wichtiger Teil der Web-Zugänglichkeit, weil dieser Text laut durch spezielle Browser Screen-Reader genannt gelesen wird, die von Menschen verwendet wird, die blind und andere mit eingeschränkter Sicht oder Mobilität sind. Alternativer Text wird nur im Browser angezeigt, wenn die Bilder nicht sichtbar sind.
Wenn Sie nicht über eine URL angeben, fügt Dreamweaver automatisch das Zeichen # als Platzhalter in dem Code.
Das Zeichen # ist eine übliche Technik für Verbindungen zu schaffen, die nicht überall verknüpfe. Da Rollover-Bilder, die auf eine andere Seite nicht verlinken viele große Nutzen haben, ist diese Technik nützlich. Denken Sie daran, dass, wenn Sie Ihre Roll wollen zu verbinden, müssen Sie das # -Zeichen mit einem Link zu einer anderen Seite ersetzen.
Die Bilder werden automatisch als Roll einrichten.
Um den Überschlag in Aktion zu sehen, speichern Sie die Datei und klicken Sie dann auf das Globus-Symbol am oberen Rande des Arbeitsbereiches Ihre Seite in einem Web-Browser in der Vorschau anzeigen.
Sie können sehen, wie Ihre Rollover in Dreamweaver Entwurfsansicht funktioniert oder durch die Live-View-Option. Wenn Sie die Live-Button oben links im Arbeitsbereich klicken, schalen Sie im Wesentlichen Dreamweaver in einen Web-Browser, die Seiten ähnlich wie der Chrome-Browser anzeigt.
Wenn Sie eine Seite auf Ihrem Computer eine Vorschau, die ein Rollover-Bild enthält, werden einige Web-Browser eine Warnung besagt, dass Sie müssen zulassen ActiveX um die Seite anzuzeigen steuert. Dies ist eine Sicherheitswarnung, die nur angezeigt, wenn die Seite auf demselben Computer geöffnet wird, in dem die Seite gespeichert wird.
Credit: Grafik durch istockphoto.com