In Dreamweaver sind Rollover-Bilder – wie der Name schon sagt – so konzipiert, dass sie reagieren, wenn jemand mit dem Cursor über ein Bild fährt. Der Effekt kann so dramatisch sein wie ein Bild eines Hundes, das durch ein Bild eines Löwen ersetzt wird, oder so subtil wie die Farbe eines Wortes, das sich ändert, wenn ein Bild ein anderes ersetzt. In jedem Fall enthält Dreamweaver ein spezielles Dialogfeld für Rollover, das das Erstellen eines einfachen Rollover-Effekts zu einem der am einfachsten anzuwendenden Verhalten macht.
Gehen Sie wie folgt vor, um ein Rollover-Image mithilfe des Dialogfelds „Image-Rollover einfügen“ von Dreamweaver zu erstellen:
1. Klicken Sie, um den Cursor auf der Seite zu platzieren, auf der das Rollover erscheinen soll.
Rollover-Effekte erfordern mindestens zwei Bilder: eines für den Anfangszustand und eines für den Rollover-Zustand. Sie können zwei verschiedene Bilder oder zwei ähnliche Bilder verwenden, aber beide sollten die gleichen Abmessungen haben. Andernfalls treten seltsame Skalierungseffekte auf, da beide Bilder an genau der gleichen Stelle auf der Seite angezeigt werden müssen.
2. Wählen Sie Einfügen –> Bildobjekte –> Rollover-Bild.
Das Dialogfeld Rollover-Bild einfügen wird angezeigt.
3. Benennen Sie im Feld Image Name Ihr Image.
Bevor Sie einem Element, z. B. einem Bild, ein Verhalten zuweisen können, muss das Element einen Namen haben, damit das Verhaltensskript darauf verweisen kann. Sie können Elemente beliebig benennen, solange Sie keine Leerzeichen oder Sonderzeichen verwenden.
4. Geben Sie im Feld Originalbild das erste Bild an, das sichtbar sein soll. Verwenden Sie die Schaltfläche Durchsuchen, um das Bild zu suchen und auszuwählen.
Wenn sich die Bilder noch nicht im Stammordner Ihrer Site befinden, kopiert Dreamweaver sie beim Erstellen des Rollovers in Ihre Site.
5. Geben Sie in das Feld Rollover-Bild das Bild ein, das sichtbar werden soll, wenn Besucher den Cursor über das erste Bild bewegen.
Auch hier können Sie die Schaltfläche Durchsuchen verwenden, um das Bild zu suchen und auszuwählen.
6. Aktivieren Sie das Kontrollkästchen Rollover-Bild vorab laden, um beim ersten Laden der Seite alle Rollover-Bilder in den Cache des Browsers zu laden.
Wenn Sie diesen Schritt nicht ausführen, kann es bei Ihren Besuchern zu Verzögerungen kommen, da das zweite Bild erst heruntergeladen wird, wenn eine Maus über das Originalbild bewegt wird.
7. Geben Sie in das Feld Beim Anklicken Gehe zu URL eine beliebige Webadresse ein, oder suchen Sie nach einer anderen Seite Ihrer Site, zu der Sie einen Link erstellen möchten.
Wenn Sie keine URL angeben, fügt Dreamweaver automatisch das #-Zeichen als Platzhalter ein.
8. Klicken Sie auf OK.
Die Bilder werden automatisch als Rollover eingerichtet.
9. Klicken Sie oben im Arbeitsbereich auf das Globussymbol, um eine Vorschau Ihrer Arbeit in einem Browser anzuzeigen und zu testen, wie das Rollover funktioniert.