## 動的ボタンとテキスト

動的ボタンとは、ユーザがマウスポインタをボタン上に移動したり、ボタンをクリックするとその外観が変わるボタンを指します。一般にロールオーバーと呼ばれます。ロールオーバーテキストも同様にユーザがマウスポインタをボタン上に移動したり、ボタンをクリックするとその外観が変わるテキストを指します。

### ロールオーバーボタンを作成するには

- 1つのボタンに対し3つのバージョンを用意します：通常の状態のバージョン、ユーザがマウスポインタをボタン上に移動したときの状態のバージョン、そしてユーザがボタンをクリックした状態のバージョンです。

- 各バージョンのアイテムは判別しやすい名前にします。それぞれのアイテムを選択し、[インスペクタ]パレットの[アイテムの全般な設定]パネルで、今回は「Normal」、「MouseOver」、「Click」と名前をつけます。

- 3つのアイテムすべてを選択します。
- [ページ]メニューから[整列...]を選択します。
- [水平方向]および[垂直方向]でそれぞれ[アイテムの中央で整列]を選択し、[OK]ボタンをクリックします。

アイテムが3つとも選択された状態でぴったりと重なります。

- [アイテム]メニューの[アクション]サブメニューから[ロールオーバー]を選択します。
- [ウインドウ]メニューから[アクション]を選択し、[アクション]パレットを開きます。

この[アクション]パレットで、どの条件でどのバージョンのボタンを表示するかを設定します。条件とは[標準]、[マウスオーバー]、[クリック]です。

初期段階ではすべてのアイテムの[標準]列にチェックマークがついています。これは通常の状態において3つのアイテムがすべて表示されることを意味します。

- アイテム「MouseOver」と「Click」について[標準]列のチェックマークをクリックして外します。そしてアイテム「MouseOver」の[マウスオーバー]列をクリックしてチェックマークをつけます。さらにアイテム「Click」の[クリック]列をクリックしてチェックマークをつけます。

各列のタイトルをクリックすると、その状態に割り当てられたアイテムのプレビューを表示できます。

ロールオーバーボタンのエフェクトをプレビューで確認します。

- Freewayウインドウの右下にある[プレビュー]ボタンをクリックします。

また、[ロールオーバー]アクションを使ってスレーブイメージの切り替えをすることもできます。詳しくは後述の「スレーブイメージとスレーブレイヤー」セクションを参照してください。

### テキストロールオーバーを作成するには

[テキストロールオーバー]アクションは、テキストリンク上にマウスポインタが移動したときにスレーブエフェクトをトリガするアクションです。

- HTMLアイテムのテキストロールオーバーを作成したい箇所に挿入ポインタを挿入します。

- [挿入]メニューの[アクションアイテム]サブメニューから[テキストロールオーバー]を選択します。

挿入ポインタの位置にテキストロールオーバーアクションが挿入されます。

- いったんHTMLアイテム以外をクリックし、次に挿入したテキストロールオーバーアイテムをクリックして選択します。

- [ウインドウ]メニューから[アクション]を選択し、[アクション]パレットを開きます。
- [アクション]パレットの[テキスト]フィールドにロールオーバーする箇所に表示させるテキストを入力します。
- [スレーブグループ]ポップアップメニューから[インディゴ]を選択します。
- [マウスオーバー#]ポップアップメニューから表示したいイメージの番号を選択します。

これでロールオーバーアクションによりスレーブグループ「インディゴ」にトリガ1が送信されるよう設定されました。次にトリガされる側のスレーブを定義します。

テキストロールオーバーの典型的な使用例は、ユーザがマウスポインタをテキスト上に移動したときに隠れていた画像を表示させるようなケースです。

- 画像が配置されている画像アイテムを選択します。
- [アイテム]メニューの[アクション]サブメニューから[スレーブイメージ]を選択します。
- [アクション]パレットの[標準]列のチェックマークを外してこの画像が通常の状態では表示されないようにします。さらに[イメージ1]列にチェックマークをつけトリガ1によってこの画像が表示されるよう指定します。

- [パラメータ]タブをクリックして[パラメータ]パネルを表示し、先程のテキストロールオーバーで指定したのと同じグループ、この場合は「インディゴ」を[スレーブグループ]から選択します。

これでユーザがマウスポインタをテキストロールオーバー上に移動したときに、この画像が表示されるようになります。

さらに、テキストロールオーバーをハイパーリンクとして動作させたい場合は、通常ハイパーリンクを設定するのと同じ操作、つまりテキストロールオーバーを選択し[編集]メニューから[ハイパーリンク...]を選択して[ハイパーリンクを編集]ダイアログボックスを開いて設定できます。

コンテンツ