Interaktivität durch Rollover-Effekte
Mit Rollover-Effekten ändert sich ein Bild durch eine Mausaktion, z. B. durch Mausklick. Zu den verbreitetsten Rollover-Typen zählen eingebettete Rollover. Hierbei verändert sich nur das Ausgangsbild. Remote-Rollover ändern die Darstellung eines Bilds an anderer Stelle auf einer Seite. Mit Adobe® GoLive® CS können Sie diese Rollover-Typen einfach und schnell erstellen. Kodierungskenntnisse sind hierfür nicht erforderlich.
In diesem Lenrprogramm erstellen Sie ein Remote-Rollover sowie ein eingebettetes Rollover mit zwei Rollover-Phasen und einer Aktion. Dafür benötigen Sie vier Bilder gleicher Größe, von denen eines ein leeres, transparentes GIF-Bild sein muss.
1. Erstellen Sie ein eingebettetes Rollover
Fügen Sie im Layout-Editor ein Bild zu, das als Ausgangsbild fungieren soll. Klicken Sie im Bildinspektor auf die Registerkarte "Link", und geben Sie im URL-Textfeld "http://www.adobe.de" ein. Wählen Sie auf der Registerkarte "Rollover" der Palette "Rollover & Aktionen" den Status "Mauskontakt", und klicken Sie auf die Schaltfläche "Neues Rollover-Bild erstellen". Wählen Sie Sie im URL-Textfeld über die Point &; Shoot-Schaltfläche bzw. über das Ordnersymbol das Bild aus, durch das das Ausgangsbild beim Bewegen der Maus darüber ersetzt werden soll. Lassen Sie die Option "Vorab laden" aktiviert, und klicken Sie für die Vorschau des Rollovers auf die Registerkarte "Vorschau" im Dokumentfenster. Bewegen Sie die Maus über das Bild, um den Effekt der erstellten Rollover-Phase anzuzeigen.
Beim Erstellen von Rollover-Effekten ist es wichtig, dass Sie nur Bilder gleicher Größe verwenden, da in GoLive (und Web-Browsern) die Größe sonst angepasst oder das Bild verzerrt wird. Durch Vorabladen eines Rollover-Bilds wird das Bild vor dem Aktivieren des Rollovers heruntergeladen und somit verhindert, dass das Bild zeitverzögert angezeigt wird. Wenn Sie ein animiertes GIF als Rollover-Bild verwenden, sollten Sie die Option "Vorab laden" deaktivieren, da einige Browser die Animation sonst sofort nach dem Laden der Datei starten
2. Fügen Sie dem Rollover einen Mausklick-Status und eine Statusleistenmeldung hinzu
Wählen Sie auf der Registerkarte "Rollover" der Palette "Rollover & Aktionen" den Status "Mausklick", und klicken Sie auf die Schaltfläche "Neues Rollover-Bild erstellen". Wählen Sie Sie im URL-Textfeld über die Point & Shoot-Schaltfläche bzw. über das Ordnersymbol das Bild aus, durch das das Ausgangsbild beim Mausklick auf das Bild ersetzt werden soll. Wählen Sie anschließend den Status "Mauskontakt", und klicken Sie auf die Schaltfläche "Neue Meldung erstellen". Geben Sie eine Meldung ein, die beim Bewegen der Maus über das Ausgangsbild in der Statusleiste des Web-Browsers angezeigt werden soll. Klicken Sie für eine Vorschau auf die Schaltfläche "Vorschau in Browser". Beim Klicken auf das Bild wird das Bild des Mausklick-Status und anschließend die Adobe-Web-Seite angezeigt.
3. Fügen Sie dem Rollover eine Aktion hinzu
Wählen Sie im Layout-Editor das Rollover-Ausgangsbild aus. Wählen Sie auf der Registerkarte "Aktionen" der Palette "Rollover &; Aktionen" aus der Ereignisliste "Mauskontakt" aus, und klicken Sie auf die Schaltfläche "Neues Objekt erstellen". Wählen Sie aus dem Menü "Aktionen" die Option "Sonstiges" > "Hintergrundfarbe festl." aus. Klicken Sie auf das Dreieck unten rechts im Farbfeld für den Hintergrund, und wählen Sie eine Farbe aus dem angezeigten Farbfeld aus. Durch Auswählen einer anderen Option aus der Liste unter den Farbfeldern können Sie eine andere Farbpalette anzeigen. Wählen Sie auf der Registerkarte "Aktionen" das Ereignis "Mausaustritt", und klicken Sie auf die Schaltfläche "Neues Objekt erstellen". Wählen Sie aus dem Menü "Aktionen" die Option "Sonstiges" > "Hintergrundfarbe festl." und aus den Farbfeldern die Originalfarbe des Seitenhintergrunds aus. Zeigen Sie eine Vorschau des Rollovers im Web-Browser an. Beim Bewegen der Maus über das Ausgangsbild ändert sich die Hintergrundfarbe der Seite, bewegen Sie die Maus vom Bild weg, wird wieder die Originalhintergrundfarbe angezeigt.
Beachten Sie insbesondere bei häufiger Verwendung von Rollover-Effekten und Aktionen auf Ihren Web-Seiten, dass ältere Browser (z. B. Microsoft Internet Explorer-Versionen älter als 4.0) diese nicht vollständig unterstützen. Damit Besucher Ihrer Web-Site den Inhalt Ihrer Seite entsprechend ihrer Browser-Version korrekt anzeigen können, verwenden Sie ein Skript für eine Browser-Weiche zum Erkennen der Browser-Version, von der die Seite geladen wird, um den Anwender automatisch auf eine diesem Browser entsprechende alternative Seite weiterzuleiten. Weitere Informationen zu Browser-Weichen finden Sie in der GoLive-Hilfe.
4. Richten Sie einen Auslöser sowie ein Remote-Bildobjekt für ein Remote-Rollover ein
Öffnen Sie eine neue Seite, und geben Sie im Layout-Editor Text für einen Platzhalter ein. Fügen Sie auf der Seite ein leeres, transparentes GIF-Bild hinzu (dies ist das Remote-Bildobjekt, das beim Bewegen der Maus über den Text ersetzt wird). Wählen Sie das Bild und anschließend eine Option aus dem Menü "Name/ID" auf der Registerkarte "Allgemein" des Bildinspektors aus. Geben Sie im Textfeld "Name/ID" einen eindeutigen Namen bzw. eine ID für das Bild ein.
Mit Remote-Rollover-Effekten werden Bilder an anderer Stelle einer Seite geändert, wenn eine Mausaktion an einem Auslöserobjekt durchgeführt wird. Als Auslöserobjekt für Remote-Rollover kann jedes beliebige HTML-Element einschließlich Text oder andere Bilder dienen. Um mithilfe eines Remote-Rollovers ein Bild in einem leeren Seitenbereich anzuzeigen, verwenden Sie ein transparentes GIF-Bild als Remote-Bildobjekt. Beim Ausführen des Remote-Rollovers wird das Bild wie aus dem Nichts angezeigt.
5. Erstellen Sie das Remote-Rollover
Wählen Sie den Text und anschließend auf der Registerkarte "Rollover" der Palette "Rollover & Aktionen" den Status "Mauskontakt" aus. Klicken Sie auf die Schaltfläche "Neues Rollover-Bild erstellen", und wählen Sie den Namen bzw. die ID des Remote-Bildobjekts aus dem Menü "Name/ID" aus. Wählen Sie Sie im URL-Textfeld über die Point & Shoot-Schaltfläche bzw. über das Ordnersymbol das Bild aus, durch das das Remote-Bildobjekt beim Bewegen der Maus über den Text Bild ersetzt werden soll. Klicken Sie für die Vorschau des Remote-Rollovers auf die Registerkarte "Vorschau" im Dokumentfenster. Bewegen Sie die Maus über den Text, um den Effekt anzuzeigen.
Mit Rollover-Effekten können Sie Ihren Web-Seiten auf einfache Weise Interaktivität hinzufügen. Mit GoLive ist die Erstellung von sowohl eingebetteten als auch Remote-Rollover-Effekten problemlos und schnell. Verwenden Sie Adobe ImageReady, können Sie ImageReady-Rollover importieren und sie GoLive mit zusätzlichen Phasen versehen.
