Arbeiten mit dem Spry-QuickInfo-Widget

Das Spry-QuickInfo-Widget zeigt Zusatzinformationen an, wenn ein Benutzer den Mauszeiger über bestimmte Elemente einer Webseite hält. Die Zusatzinformationen werden wieder ausgeblendet, wenn sich der Mauszeiger nicht mehr über dem Element befindet. Sie können für QuickInfo-Einblendungen auch festlegen, dass sie länger angezeigt werden, damit Benutzer mit QuickInfo-Inhalten interagieren können.

QuickInfo-Widgets bestehen aus den folgenden drei Komponenten:

• QuickInfo-Container. Diese Komponente enthält die Meldung oder die Inhalte, die angezeigt werden sollen, wenn der Benutzer die QuickInfo aktiviert.

• Seitenelemente, mit denen die QuickInfo aktiviert wird.

• Konstruktor-Skript. Dabei handelt es sich um JavaScript-Code, mit dem Spry angewiesen wird, die QuickInfo-Funktionalität zu erstellen.

Wenn Sie ein QuickInfo-Widget einfügen, wird in Dreamweaver mithilfe von div-Tags ein QuickInfo-Container angelegt und das Auslöserelement (das die QuickInfo aktivierende Seitenelement) in span-Tags eingeschlossen. Diese Tags werden in Dreamweaver standardmäßig verwendet. Als Tags für die QuickInfo und den Auslöser können jedoch beliebige Tags verwendet werden, solange sie sich innerhalb des body-Tags der Seite befinden.

Beachten Sie beim Verwenden des QuickInfo-Widgets die folgenden Punkte:

• Eine geöffnete QuickInfo wird geschlossen, bevor die nächste QuickInfo geöffnet wird.

• Eine QuickInfo wird angezeigt, solange der Benutzer den Mauszeiger über den Auslösebereich hält.

• Es bestehen keine Einschränkungen hinsichtlich der Art der Tags, die als Auslöser oder für QuickInfo-Inhalte verwendet werden können. (Es empfiehlt sich jedoch immer die Verwendung von Codeblockelementen, um mögliche Darstellungsprobleme mit unterschiedlichen Browsern zu vermeiden.)

• Standardmäßig wird die QuickInfo je 20 Pixel rechts und unterhalb des Mauszeigers angezeigt. Über die Optionen für den horizontalen und vertikalen Offset im Eigenschafteninspektor können Sie eine benutzerdefinierte Einblendposition festlegen.

• Derzeit besteht keine Möglichkeit, eine QuickInfo anzuzeigen, wenn eine Seite im Browser geladen wird.

Das QuickInfo-Widget erfordert sehr wenig CSS-Code. Spry verwendet JavaScript zum Anzeigen, Ausblenden und Positionieren der QuickInfo. Alle weiteren Formatierungen der QuickInfo können je nach Bedarf mit herkömmlichen CSS-Techniken umgesetzt werden. Mit der einzigen Regel in der CSS-Standarddatei wird ein Problem mit Internet Explorer 6 umgangen, damit QuickInfos über Formularelementen oder Flash-Objekten angezeigt werden.

Eine ausführliche Erläuterung zur Funktionsweise von Spry-QuickInfo-Widgets, einschließlich der vollständigen Code-Struktur, finden Sie unter www.adobe.com/go/learn_dw_sprytooltip_de.

Ein Video-Tutorial zur Verwendung von Spry-QuickInfo-Widgets finden Sie unter www.adobe.com/go/lrvid4046_dw_de.

QuickInfo-Widgets einfügen

Dadurch werden ein neues QuickInfo-Widget mit einem Container für den QuickInfo-Inhalt sowie ein Platzhaltersatz als QuickInfo-Auslöser eingefügt.

Sie können zudem ein bereits auf der Seite vorhandenes Element (z. B. ein Bild) markieren und dann die QuickInfo einfügen. In diesem Fall fungiert das markierte Element als neuer QuickInfo-Auslöser. Sie müssen ein vollständiges Tag-Element markieren (z. B. ein img-Tag oder ein p-Tag), damit diesem in Dreamweaver gegebenenfalls eine ID zugewiesen werden kann, falls noch keine vorhanden ist.

Optionen für QuickInfo-Widgets bearbeiten

Sie können Optionen festlegen, um das Verhalten des QuickInfo-Widgets anzupassen.

Name

Der Name des QuickInfo-Containers. Der Container enthält den QuickInfo-Inhalt. Standardmäßig wird in Dreamweaver ein div-Tag als Container verwendet.

Auslöser

Das Seitenelement, mit dem die QuickInfo aktiviert wird. Standardmäßig wird in Dreamweaver als Auslöser ein Platzhaltersatz eingefügt, der in span-Tags eingeschlossen ist. Es kann jedoch jedes Seitenelement mit einer eindeutigen ID verwendet werden.

Dem Mauszeiger folgen

Wenn dieses Kontrollkästchen aktiviert ist, folgt die QuickInfo der Bewegung des Mauszeigers, solange dieser sich über dem Auslöserelement befindet.

Beim Herausbewegen des Mauszeigers ausblenden

Wenn dieses Kontrollkästchen aktiviert ist, bleibt die QuickInfo geöffnet, solange der Mauszeiger darauf zeigt (selbst wenn dieser das Auslöserelement verlässt). Dies ist hilfreich, wenn sich Hyperlinks oder andere interaktive Elemente innerhalb der QuickInfo befinden. Wenn das Kontrollkästchen nicht aktiviert ist, wird das QuickInfo-Element geschlossen, sobald der Mauszeiger den Auslösebereich verlässt.

Horizontaler Offset

Legt die horizontale Position der QuickInfo relativ zum Mauszeiger fest. Der Offsetwert wird in Pixel angegeben und der Standardwert beträgt 20 Pixel.

Vertikaler Offset

Legt die vertikale Position der QuickInfo relativ zum Mauszeiger fest. Der Offsetwert wird in Pixel angegeben und der Standardwert beträgt 20 Pixel.

Einblendverzögerung

Die Verzögerungsdauer in Millisekunden, bevor die QuickInfo nach dem Auslösen angezeigt wird. Der Standardwert ist 0.

Ausblendverzögerung

Die Verzögerungsdauer in Millisekunden, bevor die QuickInfo nach dem Verlassen des Auslöserelements ausgeblendet wird. Der Standardwert ist 0.

Effekt

Der Effekttyp, der beim Einblenden der QuickInfo verwendet werden soll. „Jalousie“ simuliert eine sich öffnende oder schließende Fensterjalousie, die das Element anzeigt oder verbirgt. Mit „Ausblenden“ wird die QuickInfo allmählich ein- oder ausgeblendet. Der Standardwert ist „Kein“.

1. Halten Sie den Mauszeiger über den QuickInfo-Inhalt auf der Seite oder setzen Sie die Einfügemarke in den Inhalt.

2. Klicken Sie auf die blaue Registerkarte des QuickInfo-Widgets, um es auszuwählen.

3. Legen Sie nach Bedarf die Optionen im Eigenschafteninspektor des QuickInfo-Widgets fest.