Komponente „Bildschaltfläche“

Diese Komponente wird nicht für AMPHTML-Anzeigen, Videoanzeigen und Bildanzeigen unterstützt.

Die Komponente „Bildschaltfläche“ ist eine Schaltfläche, die auf drei verschiedene Arten dargestellt werden kann:

Bild für neutralen Zustand: Das Standardbild, wenn der Nutzer nicht mit der Schaltfläche interagiert.
Bild für Mouseover: Das Bild, wenn sich der Cursor des Nutzers über der Schaltfläche befindet.
Bild für gedrückten Zustand: Das Bild, wenn der Nutzer auf die Schaltfläche klickt.

So können Sie auf einfache Weise eine optisch reagierende Schaltfläche erzeugen. Sie müssen dazu nur drei Bilder festlegen.

So verwenden Sie die Komponente "Bildschaltfläche" in Ihrem Projekt:

Öffnen Sie das Steuerfeld Komponenten und dann den Ordner Interaktion.
Ziehen Sie die Komponente Bildschaltfläche in den Anzeigebereich.
Öffnen Sie das Steuerfeld Eigenschaften und gehen Sie zum Eigenschaftenbereich Bildschaltfläche. Geben Sie dort die URLs für Bild für neutralen Zustand, Bild für Mouseover und Bild für gedrückten Zustand ein. Wenn die Quelldatei lokal gespeichert ist, klicken Sie auf Durchsuchen , um die gewünschte Bilddatei auf Ihrem Computer auszuwählen.

Eigenschaften

Eigenschaft	Beschreibung
Name	Name der Komponente
Bild für neutralen Zustand	Dies ist die URL für das Bild der Schaltfläche im unbetätigten Zustand. Sie kann auf eine externe URL („https://www.google.com/example.jpg“) oder ein Asset in der Bibliothek („assets/example.jpg“) verweisen. Kann an dynamische Daten gebunden werden.
Bild für Mouseover	Dies ist die URL für das Bild der Schaltfläche im Mouseover-Zustand oder Hover-Zustand. Sie kann auf eine externe URL („https://www.google.com/example.jpg“) oder ein Asset in der Bibliothek („assets/example.jpg“) verweisen. Kann an dynamische Daten gebunden werden.
Bild für gedrückten Zustand	Dies ist die URL für das Bild der Schaltfläche im betätigten Zustand. Sie kann auf eine externe URL („https://www.google.com/example.jpg“) oder ein Asset in der Bibliothek („assets/example.jpg“) verweisen. Kann an dynamische Daten gebunden werden.
Hintergrund	Dies ist die Farbe, die sichtbar wird, wenn ein Bild kleiner als die Fläche der Komponente ist. Kann an dynamische Daten gebunden werden.
Ausrichtung	Dies beschreibt die Ausrichtung des Bilds innerhalb der Komponente: center bottom bottom left bottom right left right top top left top right
Skalierung	Wenn Bilder eine andere Größe als die Komponente haben, gibt es verschiedene Möglichkeiten der Anpassung: Größe an Frame anpassen: Skaliert das Bild innerhalb des Komponentenbereichs so weit wie möglich, ohne es zuzuschneiden oder zu strecken. Auf Frame zuschneiden: Skaliert das Bild so weit wie möglich, um den Komponentenbereich zu füllen, ohne das Bild zu strecken. Das Bild wird vertikal oder horizontal zugeschnitten. Ohne Bild strecken, um Frame zu füllen: Das gesamte Bild ist im gesamten Komponentenbereich sichtbar.
Deaktiviert	Hier deaktivieren Sie die Schaltfläche. Diese Option ist standardmäßig nicht angeklickt.

Ereignisse und Aktionen

Von der Komponente „Bildschaltfläche“ gesendete Ereignisse

Sie können basierend auf den folgenden Ereignissen der Komponente "Bildschaltfläche" andere Aktionen auslösen:

Ereignis	Beschreibung
Bildschaltfläche geladen	Wird ausgelöst, wenn alle Schaltflächenbilder geladen wurden.

Wenn Sie eines dieser Ereignisse im Dialogfeld Ereignis auswählen möchten, müssen Sie die Komponente „Bildschaltfläche“ als Ziel festlegen.

Von der Komponente „Bildschaltfläche“ ausgeführte Aktionen

Folgende Aktionen der Komponente "Bildschaltfläche" können als Reaktion auf andere Ereignisse ausgelöst werden:

Aktion	Konfigurationsoptionen
Toggle enable	Keine
Set images	Up image source: Die URL des neuen Bilds für den neutralen Zustand. Over image source: Die URL des neuen Bilds für Mouseover. Down image source: Die URL des neuen Bilds für den gedrückten Zustand.

Wenn Sie eine dieser Aktionen im Dialogfeld Ereignis auswählen, legen Sie die Komponente „Bildschaltfläche“ als Empfänger fest.

Informationen zum Konfigurieren von Ereignissen

Vorschau

Für diese Komponente ist in der Google Web Designer-Oberfläche keine Vorschau möglich. Wenn Sie die Komponente in Aktion sehen möchten, erstellen Sie eine Vorschau des Dokuments in Ihrem bevorzugten Browser. Klicken Sie hierzu in der rechten oberen Ecke auf die Schaltfläche Vorschau .

War das hilfreich?

Wie können wir die Seite verbessern?