画像ボタン コンポーネント

画像ボタン コンポーネントは、次の 3 つの視覚的状態を有するボタンです。
  • アップ画像 - ユーザーがボタンを操作していないときのデフォルトの画像
  • オーバー画像 - ユーザーのカーソルがボタン上にあるときの画像
  • ダウン画像 - ユーザーがボタンをクリックしたときの画像

これにより、3 つの画像を指定するだけで視覚的に反応するボタンを作成できます。

プロジェクトで画像ボタン コンポーネントを使用するには:

  1. [コンポーネント] パネル、[操作] フォルダの順に開きます。
  2. [画像ボタン] コンポーネント をステージにドラッグします。
  3. [プロパティ] パネルの [画像ボタン] プロパティ セクションで、[アップ画像]、[オーバー画像]、[ダウン画像] の URL を入力します。画像のソースファイルがローカルにある場合は、各項目の参照ボタン をクリックして、パソコンのファイル システムから画像ファイルを選択します。

プロパティ

プロパティ 説明
名前 コンポーネント名。
アップ画像 押されていない状態のボタンの画像の URL。外部 URL(「https://www.google.com/example.jpg」)または Web Designer のアセット ライブラリ内のアセット(「assets/example.jpg」)を参照できます。動的データにバインドできます。
オーバー画像 マウスオーバーやカーソルを合わせた状態のボタンの画像の URL。外部 URL(「https://www.google.com/example.jpg」)または Web Designer のアセット ライブラリ内のアセット(「assets/example.jpg」)を参照できます。動的データにバインドできます。
ダウン画像 押されている状態のボタンの画像の URL。外部 URL("https://www.google.com/example.jpg")または Web Designer のアセット ライブラリ内のアセット("assets/example.jpg")を参照できます。動的データにバインドできます。
背景 画像がコンポーネント領域よりも小さい場合に表示される色。動的データにバインドできます。
位置揃え

コンポーネント内での画像の配置方法。

  • center
  • bottom
  • bottom left
  • bottom right
  • left
  • right
  • top
  • top left
  • top right
スケーリング

コンポーネントとサイズが異なる画像を表示する方法:

  • 画像が収まるようにサイズ変更 - トリミングや縦横比の変更を行わずに、画像がコンポーネント領域内にできるだけ大きく表示されるようサイズ調整します。
  • 画像が収まるように切り抜く - 縦横比の変更を行わずに、画像でコンポーネント領域が隙間なく埋まるようにサイズ調整し、はみ出た部分(縦または横)をトリミングします。
  • なし
  • 画像が収まるように拡大 - 画像全体をコンポーネント領域全体に表示します。
無効 ボタンを無効にします。このチェックボックスはデフォルトでオフになっています。

イベントとアクション

画像ボタン コンポーネントから送信されるイベント

次の画像ボタン コンポーネントからのイベントにより、他のアクションをトリガーできます。

イベント 説明
画像ボタンの読み込み完了 すべてのボタン画像が読み込まれると送信されます。

[イベント] ダイアログで上記のイベントのいずれかを選択する場合は、画像ボタン コンポーネントをターゲットとして設定します。

画像ボタン コンポーネントにより実行されるアクション

他のイベントによって、次の画像ボタン コンポーネントのアクションをトリガーできます。

アクション 設定項目
Toggle enable なし
Set images
  • Up image source - 新しいアップ画像の URL。
  • Over image source - 新しいオーバー画像の URL。
  • Down image source - 新しいダウン画像の URL。

[イベント] ダイアログで上記のアクションのいずれかを選択する場合は、画像ボタン コンポーネントをレシーバーとして設定します。

イベントを設定する方法をご確認ください。

プレビュー

このコンポーネントは Google Web Designer インターフェースではプレビューできません。コンポーネントの動作を確認するには、右上隅にある [プレビュー] ボタン をクリックし、お使いのブラウザでドキュメントをプレビューしてください。

この情報は役に立ちましたか?
改善できる点がありましたらお聞かせください。