ロールオーバー効果を使用すると、画像にマウスを置いた時に違う画像を表示するなど、ページに動きを付けることができます。

■操作

1. あらかじめ使用する画像をウェブアート デザイナーで作成します。

   メニューバーから［ファイル-Web 用保存ウィザード］を使用して、個々のファイルを保存しておきます。

   ※この例では以下の２個の画像を作成しています。画像はマウス ポインターを置いた時と置かない時の２種類を用意する必要があります。

   

2. ホームページ・ビルダーを起動して、ロールオーバー効果を入れたいページを開きます。ロールオーバー画像を入れたいところにマウスを合わせ、［画像のロールオーバー効果ウィザード］ダイアログボックスを表示します。

   ※どこでも配置モードでは、挿入位置を指定する必要はありません。

   ［画像のロールオーバー効果ウィザード］ダイアログボックス 表示方法

   ※〔かんたん〕では、ナビメニューから［写真や画像の挿入-ロールオーバー効果］を選択します。

   ※〔スタンダード〕〔エディターズ〕では、メニューバーから［挿入-画像の効果-ロールオーバー効果］を選択します。

   ［画像のロールオーバー効果ウィザード（通常時の画像の指定）］ダイアログボックスが表示されます。

3. ［参照］ボタンをクリックし、作成したファイルを選択します。プレビューに画像が表示されていることを確認し、［次へ］ボタンをクリックします。

   

   ［画像のロールオーバー効果ウィザード（マウス ポインタが上にきたときの画像の指定）］ダイアログボックスが表示されます。

4. ［ファイル名を指定する］を選択して［参照］ボタンをクリックし、作成した色違いの画像を選択します。プレビューの表示が正しいか確認し、［次へ］ボタンをクリックします。

   

   ［画像のロールオーバー効果ウィザード（その他の設定）］ダイアログボックスが表示されます。

5. ［画像の入れ替え］を再度確認し、［次へ］ボタンをクリックします。

   ※ロールオーバー画像にリンクを設定する場合は［リンクの指定］でファイルや URL を指定します。あわせてターゲットを指定することもできます。

   

   ［画像のロールオーバー効果ウィザード（他の場所の画像の交換）］ダイアログボックスが表示されます。

6. ［完了］ボタンをクリックします。

   

   ページ編集画面に戻ります。

7. 設定が終わると以下のようになるので、プレビュー画面で動きを確認してください。

   ページ編集画面

   

   プレビュー画面

   

■関連情報

→マウス ポインタを合わせた時に、画像の色や模様が変わるようにしたい

▲ページの先頭へ戻る