Lernprogramm zum Erstellen eines Rollover-Bildes in Dreamweaver

Ein Rollover-Bild ist ein Bild, das sich in ein anderes Bild ändert, wenn Sie oder Ihr Kunde mit der Maus darüber fahren. Diese werden häufig verwendet, um ein interaktives Gefühl wie Schaltflächen oder Registerkarten zu erstellen. Sie können jedoch Rollover-Bilder aus fast allem erstellen.

Dieses Lernprogramm soll Ihnen beim Erstellen eines Rollover-Bildes in Dreamweaver helfen. Es ist für Benutzer gedacht, die die folgenden Versionen von Dreamweaver verwenden:

• Dreamweaver MX
• Dreamweaver MX 2004
• Dreamweaver 8
• Dreamweaver CS3
• Dreamweaver CS4
• Dreamweaver CS5
• Dreamweaver CS6

Voraussetzungen für dieses Tutorial

• DreamweaverEine der oben aufgeführten Versionen.
• Ein OriginalbildStellen Sie sicher, dass Sie dieses Bild optimieren. Dadurch können Ihre Seiten schneller geladen werden.
• Das Rollover-BildDieses Bild sollte die gleichen Abmessungen wie das Originalbild haben. Und sollte wie das Originalbild optimiert werden, um das Laden der Seiten zu erleichtern.
• Eine InternetseiteAuf dieser HTML-Seite legen Sie Ihr Rollover-Bild ab.

Loslegen

1. Starten Sie Dreamweaver
2. Öffnen Sie die Webseite, auf der Sie Ihren Rollover haben möchten

Fügen Sie ein Rollover-Bildobjekt ein

Mit Dreamweaver können Sie leicht ein Rollover-Bild erstellen.

1. Gehen Sie zum Einfügen-Menü und runter zum Bildobjekte Untermenü.
2. Wählen Image-Rollover oder Rollover-Bild.

In älteren Versionen von Dreamweaver werden die Bildobjekte stattdessen als „interaktive Bilder“ bezeichnet.

Teilen Sie Dreamweaver mit, welche Bilder verwendet werden sollen

Dreamweaver zeigt ein Dialogfeld mit den Feldern an, die Sie zum Erstellen Ihres Rollover-Images ausfüllen müssen.

Bildname

Wählen Sie einen Bildnamen, der für die Seite eindeutig ist. Es sollte alles aus einem Wort bestehen, aber Sie können Zahlen, Unterstriche (_) und Bindestriche (-) verwenden. Dies wird verwendet, um das zu ändernde Bild zu identifizieren.

Original Bild

Dies ist die URL oder der Ort des Bildes, das auf der Seite beginnen soll. In diesem Feld können Sie relative oder absolute Pfad-URLs verwenden. Dies sollte ein Bild sein, das auf Ihrem Webserver vorhanden ist oder das Sie mit der Seite hochladen.

Rollover-Bild

Dies ist das Bild, das angezeigt wird, wenn Sie mit der Maus über das Bild fahren. Genau wie das Originalbild kann dies ein absoluter oder relativer Pfad zum Bild sein. Es sollte vorhanden sein oder hochgeladen werden, wenn Sie die Seite hochladen.

Rollover-Bild vorladen

Diese Option ist standardmäßig ausgewählt, da der Rollover schneller angezeigt wird. Wenn Sie das Rollover-Image vorab laden, speichert der Webbrowser es in einem Cache, bis der Mauszeiger darüber bewegt wird.

Alternativer Text

Guter alternativer Text macht Ihre Bilder leichter zugänglich. Beim Hinzufügen von Bildern sollten Sie immer einen alternativen Text verwenden.

Wenn Sie darauf klicken, gehen Sie zur URL

Die meisten Leute klicken auf ein Bild, wenn sie eines auf einer Seite sehen. Sie sollten sich also angewöhnen, sie anklickbar zu machen. Mit dieser Option können Sie die Seite oder URL angeben, zu der der Betrachter gelangt, wenn er auf das Bild klickt. Diese Option ist jedoch nicht erforderlich, um einen Rollover zu erstellen.

Wenn Sie alle Felder ausgefüllt haben, klicken Sie auf OK Dreamweaver muss ein Rollover-Image erstellen.

Dreamweaver schreibt das JavaScript für Sie

Wenn Sie die Seite in der Codeansicht öffnen, sehen Sie, dass Dreamweaver einen JavaScript-Block in die Ihres HTML-Dokuments. Dieser Block enthält die drei Funktionen, die Sie benötigen, um die Bilder auszutauschen, wenn Sie mit der Maus darüber fahren, und die Vorladefunktion, falls Sie sich dafür entschieden haben.

Funktion MM_swapImgRestore ()Funktion MM_findObj (n, d)Funktion MM_swapImage ()Funktion MM_preloadImages ()

Dreamweaver Fügt den HTML-Code für den Rollover hinzu

Wenn Sie festlegen, dass Dreamweaver die Rollover-Images vorab lädt, wird der HTML-Code im Textkörper Ihres Dokuments angezeigt, um das Preload-Skript aufzurufen, damit Ihre Bilder schneller geladen werden.

onload = "MM_preloadImages ('shasta2.jpg')"

Dreamweaver fügt auch den gesamten Code für Ihr Bild hinzu und verlinkt es (falls Sie eine URL angegeben haben). Der Rollover-Anteil wird dem Ankertag als OnMouseover- und Onmouseout-Attribut hinzugefügt.

onmouseout = "MM_swapImgRestore ()"onmouseover = "MM_swapImage ('Image1', '', 'shasta1.jpg', 1)"

Testen Sie den Rollover

Sehen Sie sich das voll funktionsfähige Rollover-Bild an und erfahren Sie, was Shasta im Kopf hat.