このコンポーネントは、AMP HTML 広告、動画広告、イメージ広告ではサポートされていません。
画像ボタン コンポーネントは、次の 3 つの視覚的状態を有するボタンです。
- アップ画像 - ユーザーがボタンを操作していないときのデフォルトの画像
- オーバー画像 - ユーザーのカーソルがボタン上にあるときの画像
- ダウン画像 - ユーザーがボタンをクリックしたときの画像
これにより、3 つの画像を指定するだけで視覚的に反応するボタンを作成できます。
プロジェクトで画像ボタン コンポーネントを使用するには:
- [コンポーネント] パネル、[操作] フォルダの順に開きます。
- [画像ボタン] コンポーネント
をステージにドラッグします。
- [プロパティ] パネルの [画像ボタン] プロパティ セクションで、[アップ画像]、[オーバー画像]、[ダウン画像] の URL を入力します。画像のソースファイルがローカルにある場合は、各項目の参照ボタン
をクリックして、パソコンのファイル システムから画像を選択します。
プロパティ
| プロパティ | 説明 |
|---|---|
| 名前 | コンポーネント名。 |
| アップ画像 | 押されていない状態のボタンの画像の URL です。外部 URL（「https://google.com/example.jpg」）またはライブラリのアセット（「assets/example.jpg」）を参照できます。動的データにバインドできます。 |
| オーバー画像 | マウスオーバーやカーソルを合わせた状態のボタンの画像の URL。外部 URL（「https://google.com/example.jpg」）またはライブラリのアセット（「assets/example.jpg」）を参照できます。動的データにバインドできます。 |
| ダウン画像 | 押されている状態のボタンの画像の URL。外部 URL（「https://google.com/example.jpg」）またはライブラリのアセット（「assets/example.jpg」）を参照できます。動的データにバインドできます。 |
| 背景 | 画像がコンポーネント領域よりも小さい場合に表示される色。動的データにバインドできます。 |
| 位置揃え |
コンポーネント内での画像の配置方法です。
|
| スケーリング |
コンポーネントとサイズが異なる画像を表示する方法:
|
| 無効 | ボタンを無効にします。このチェックボックスはデフォルトでオフになっています。 |
イベントとアクション
画像ボタン コンポーネントから送信されるイベント次の画像ボタン コンポーネントからのイベントにより、他のアクションをトリガーできます。
| イベント | 説明 |
|---|---|
| 画像ボタンの読み込み完了 | すべてのボタン画像が読み込まれると送信されます。 |
[イベント] ダイアログで上記のイベントのいずれかを選択する場合は、画像ボタン コンポーネントをターゲットとして設定します。
他のイベントによって、次の画像ボタン コンポーネントのアクションをトリガーできます。
| アクション | 設定項目 |
|---|---|
| Toggle enable | なし |
| Set images |
|
[イベント] ダイアログで上記のアクションのいずれかを選択する場合は、画像ボタン コンポーネントをレシーバーとして設定します。
イベントを設定する方法をご確認ください。
プレビュー
このコンポーネントは Google Web Designer インターフェースではプレビューできません。コンポーネントの動作を確認するには、右上隅にある [プレビュー] ボタン 