このチュートリアルでは、１つのリモートロールオーバーと１つのセルフロールオーバーを作成し、２つのロールオーバーステートおよび１つのアクションを追加します。 このチュートリアルの手順を完了するには、同じサイズの４つの画像が必要です。その中の１つは空の透明なGIF画像を使用します。
レイアウトエディタで、標準画像（ベース画像）とする画像を追加します。 画像インスペクタの「リンク」タブをクリックし、「URL」テキストボックスに「http://www.adobe.com」と入力します。 ロールオーバーとアクションパレットの「ロールオーバー」タブで、「オーバー」を選択し、新規ロールオーバー画像を作成ボタンをクリックします。 「URL」テキストボックスで、標準画像上にマウスポインタを移動したときに標準画像を置き換える画像にポイント＆シュートをドラッグします。または、参照ボタンをクリックしてその画像を選択します。 「プリロード」を選択した状態にして、ドキュメントウィンドウの「プレビュー」タブをクリックし、ロールオーバーをプレビューします。マウスポインタをボタン上に移動して、作成したロールオーバーステートの効果を確認してください。
ロールオーバーを作成する場合は、同じサイズの画像を使用してください。サイズが異なると、GoLive（およびWebブラウザ）でサイズの変更が必要になり、画像が歪む場合もあります。 ロールオーバー画像をプリロードすると、ロールオーバーが有効になる前に画像がダウンロードされ、画像がすぐに表示されます。ロールオーバー画像としてアニメーションGIFを使用する場合は、「プリロード」を選択解除してください。ブラウザによってはファイルをプリロードしてすぐにアニメーションが再生されてしまうことがあります。
 |
ロールオーバーとアクションパレットの「ロールオーバー」タブで、「ダウン」を選択し、新規ロールオーバー画像を作成ボタンをクリックします。 「URL」テキストボックスで、画像上でマウスボタンを押したときにオーバー画像を置き換える画像にポイント＆シュートをドラッグします。または、参照ボタンをクリックしてその画像を選択します。 次に、「オーバー」ステートを選択し、新規メッセージを作成ボタンをクリックします。 標準画像上にマウスポインタを移動したときにWebブラウザのステータスバーに表示するメッセージを入力します。 ツールバーにあるブラウザでプレビューボタンをクリックして、Webブラウザでロールオーバーをプレビューします。オーバー画像上でマウスボタンを押すと、ダウン画像が表示され、次にAdobe Web ページがブラウザに表示されます。
 |
レイアウトエディタで、標準のロールオーバー画像を選択します。 ロールオーバーとアクションパレットの「アクション」タブで、イベントリストから「マウスを合わせる」を選択して、新規アイテムを作成ボタンをクリックします。 アクションメニューのその他のアクション／背景色の設定を選択します。 背景色フィールドの右下隅をクリックし、表示されるスウォッチのリストから背景色を選択します。別のスウォッチセットを使用する場合は、スウォッチの下に表示されるリストから選択します。 「アクション」タブで、イベントリストから「領域外に出る」を選択して、新規アイテムを作成ボタンをクリックします。 アクションメニューのその他のアクション／背景色の設定を選択し、スウォッチのリストからページの元の背景色を選択します。 Webブラウザでロールオーバーをプレビューします。標準画像上にマウスポインタを移動すると、ページの背景色が変わります。画像の外にマウスポインタを移動すると、背景色が元の色に戻ります。
Webページでロールオーバーやアクションを多く使用する場合、ロールオーバーやアクションを完全にサポートしていないブラウザ（Microsoft Internet Explorerバージョン4.0より前のブラウザなど）がありますので、ご注意ください。 Webページのコンテンツを訪問者のブラウザに応じた形式で表示するには、ブラウザ切り替えスクリプトを使用してページの読み込み時にWebブラウザを検出し、そのブラウザに応じた代替ページに自動的に切り替えるようにします。 ブラウザ切り替えスクリプトについて詳しくは、『GoLive ヘルプ』を参照してください。
 |
新しいページを開いて、レイアウトエディタにプレースホルダテキストを入力します。 ページに空の透明なGIF画像を追加します。これはリモート画像オブジェクトになり、テキスト上にマウスポインタを移動したときに別の画像に置き換えられます。 画像を選択し、画像インスペクタの「基本」タブの名前/ID メニューからオプションを選択して、「名前/ID」テキストボックスに画像固有の名前またはIDを入力します。
リモートロールオーバーでは、トリガオブジェクト上でマウスを操作すると、ページの別の場所にある画像が変更されます。 リモートロールオーバーのトリガオブジェクトとして、テキストやその他の画像など、任意のHTMLエレメントを使用できます。 リモートロールオーバーを使用してページの空白領域にオブジェクトを表示するには、透明なGIFをリモート画像オブジェクトとして使用します。 リモートロールオーバーを実行すると、空白領域に画像が表示されます。
 |
テキストを選択し、ロールオーバーとアクションパレットの「ロールオーバー」タブで、「オーバー」を選択します。 新規ロールオーバー画像を作成ボタンをクリックし、名前/IDメニューからリモート画像オブジェクトの名前またはIDを選択します。 「URL」テキストボックスで、テキスト上にマウスポインタを移動したときにリモート画像オブジェクトを置き換える画像にポイント＆シュートをドラッグします。または、参照ボタンをクリックしてその画像を選択します。 ドキュメントウィンドウで「プレビュー」タブをクリックし、リモートロールオーバーをプレビューします。テキスト上にマウスポインタを移動して効果を確認してください。
ロールオーバーを使用すると、Webページにインタラクティブ機能を簡単に追加できます。GoLive CSでは、セルフロールオーバーとリモートロールオーバーを簡単にすばやく作成することができます。 Adobe ImageReadyを使用すると、ImageReadyのロールオーバーを読み込んで、GoLiveのロールオーバーに他の種類のステートを追加することもできます。
 |
| その他関連チュートリアルや製品情報については以下のURLをご覧ください http://www.adobe.co.jp/framemaker/ |
||
| 2002 Adobe Systems Incorporated. All rights reserved. | ||