インデックスへ戻る

リソース
bullet 印刷用
ロールオーバーでインタラクティブ機能を追加
page 1 2
ロールオーバーは、クリックなどのマウス操作に応じて画像のアピアランスを変更するのに使用します。 代表的なロールオーバーはセルフロールオーバーです。セルフロールオーバーでは、トリガ画像だけが変更されます。 リモートロールオーバーでは、ページの別の場所にある画像のアピアランスが変更されます。 Adobe® GoLive® CSでは、両方の種類のロールオーバーを簡単にすばやく作成できます。しかも、1行のコードも書く必要がありません。
このチュートリアルでは、1つのリモートロールオーバーと1つのセルフロールオーバーを作成し、2つのロールオーバーステートおよび1つのアクションを追加します。 このチュートリアルの手順を完了するには、同じサイズの4つの画像が必要です。その中の1つは空の透明なGIF画像を使用します。
main
セルフロールオーバーを作成

レイアウトエディタで、標準画像(ベース画像)として使用する画像を追加します。 画像インスペクタの「リンク」タブをクリックし、「URL」テキストボックスに「http://www.adobe.com」と入力します。 ロールオーバーとアクションパレットの「ロールオーバー」タブで、「オーバー」を選択し、新規ロールオーバー画像を作成ボタンをクリックします。 「URL」テキストボックスで、標準画像上にマウスポインタを移動したときに標準画像を置き換える画像にポイント&シュートをドラッグします。または、参照ボタンをクリックしてその画像を選択します。 「プリロード」を選択した状態にして、ドキュメントウィンドウの「プレビュー」タブをクリックし、ロールオーバーをプレビューします。ボタン上にマウスポインタを移動して、作成したロールオーバーステートの効果を確認してください。

ロールオーバーを作成する場合、同じサイズの画像を使用してください。サイズが異なると、GoLive(およびWebブラウザ)でサイズの変更が必要になり、画像が歪む場合もあります。 ロールオーバー画像をプリロードすると、ロールオーバーが有効になる前に画像がダウンロードされ、画像がすぐに表示されます。ロールオーバー画像としてアニメーションGIFを使用する場合は、「プリロード」を選択解除してください。ブラウザによってはファイルをプリロードしてすぐにアニメーションが再生されてしまうことがあります。

画像ファイルなし
ロールオーバーにダウンのステートとステータスバーメッセージを追加する

ロールオーバーとアクションパレットの「ロールオーバー」タブで、「ダウン」を選択し、新規ロールオーバー画像を作成ボタンをクリックします。 「URL」テキストボックスで、画像上でマウスボタンを押したときにオーバー画像を置き換える画像にポイント&シュートをドラッグします。または、参照ボタンをクリックしてその画像を選択します。 次に、「オーバー」ステートを選択し、新規メッセージを作成ボタンをクリックします。 標準画像上にマウスポインタを移動したときにWebブラウザのステータスバーに表示するメッセージを入力します。 ツールバーにあるブラウザでプレビューボタンをクリックして、Webブラウザでロールオーバーをプレビューします。オーバー画像上でマウスボタンを押すと、ダウン画像が表示され、次にAdobe Webページがブラウザに表示されます。

step02_int
ロールオーバーにアクションを追加

レイアウトエディタで、標準のロールオーバー画像を選択します。 ロールオーバーとアクションパレットの「アクション」タブで、イベントリストから「マウスを合わせる」を選択して、新規アイテムを作成ボタンをクリックします。 アクションメニューのその他のアクション/背景色の設定を選択します。 背景色フィールドの右下隅をクリックし、表示されるスウォッチのリストから背景色を選択します。別のスウォッチセットを使用する場合は、スウォッチの下に表示されるリストから選択します。 「アクション」タブで、イベントリストから「領域外に出る」を選択して、新規アイテムを作成ボタンをクリックします。 アクションメニューのその他のアクション/背景色の設定を選択し、スウォッチのリストからページの元の背景色を選択します。 Webブラウザでロールオーバーをプレビューします。標準画像上にマウスポインタを移動すると、ページの背景色が変わります。画像の外にマウスポインタを移動すると、背景色が元の色に戻ります。

Webページでロールオーバーやアクションを多く使用する場合、ロールオーバーやアクションを完全にはサポートしていないブラウザ(Microsoft Internet Explorerバージョン4.0より前のブラウザなど)がありますので、ご注意ください。 Webページのコンテンツを訪問者のブラウザに応じた形式で表示するには、ブラウザ切り替えスクリプトを使用してページの読み込み時にWebブラウザを検出し、そのブラウザに応じた代替ページに自動的に切り替えるようにします。 ブラウザ切り替えスクリプトについて詳しくは、『GoLiveヘルプ』を参照してください。

step03_int
トップへ戻る
next