ロールオーバー効果で縮小画像を効果的に拡大画像にしてみせる

ロールオーバー効果は、メニューリンクのために使うことが多いかと思いますが、リンクを設定しなくても、下のサンプルのように画像を効果的に見せることも可能です。

※画像「無農薬ハーブのお店　ゆうちゃんちのハーブ園」様

■Sample ※右側の縮小画像の上にマウスポインタをおくと、左側の画像が入れ替わります。

画像の準備

ロールオーバー効果を設定する前に、画像の準備を整えます。
このページSampleでは、利用している画像は、拡大画像が4枚と縮小画像が4枚です。
拡大画像のサイズは4枚とも同じサイズにします。

画像の準備が整ったら、ロールオーバー効果を設定していきます。

操作手順

1. まず、最初に表示させる状態にそれぞれの画像を表などを利用して挿入します。

2.　このページでは、例として上から2番目の「ラベンダー」の拡大画像が表示されるように設定してみます。

右側の縮小画像(赤枠内ラベンダー画像)を右クリックして、表示されたメニューから[画像のロールオーバー効果の挿入]を選択します。

3.　画像のロールオーバー効果ウィザードが開始されるので画面の指示に従って進めていきます。
まず、1画面目では、選択した画像が表示されているか確認して[次へ]をクリックします。

4.　次の画面で[効果の選択]を行います。
※このウィザードではマウスポインタが上にきた時の状態を設定しないと次に進めません。[効果の設定]、または[ファイル名を指定する]を選択して何かしらの設定を行います。

5.　サンプルでは、[効果の選択]画面で[ズーム]を選択しました。効果を選択したら[OK]をクリックします。

6.　画像のロールオーバー効果ウィザードの画面に再び戻るので[次へ]をクリックします。

7. 次にオプション画面となります。
このオプションでは、「マウスポインタが上にあるとき、離れた位置にある画像も同時に入れ替える」という効果を設定することができます。
　[追加]ボタンをクリックします。

8.　「画像を入れ替える場所」を聞いていますので、[ページ内の画像]では、手順「1.」で挿入した拡大画像を選択します。選択すると右側にある[ページのプレビュー]画面内の画像が反転するので、どの個所の画像が入れ替わるのか確認することができます。

選択ができたら[次へ]ボタンをクリックします。

9.　次の画面では「入れ替わる画像」を聞いています。[ファイル名を指定する]を選択し、[参照]ボタンをクリックして(ここでは)ラベンダーの拡大画像を選択します。
[入れ替え前]の画像と[入れ替え後]の画像を確認し、OKであれば[完了]ボタンをクリックします。

10.　次のページでは[完了]ボタンをクリックします。
一つの縮小画像に対して一つの拡大画像を入れ替えるので続けて操作をすることは出来ません。
※[追加]ボタンで他の箇所の設定はできません。

他の画像の縮小画像にも同じ効果を設定する場合は手順「2.」〜手順「10.」の操作を繰り返します。

11.　全ての縮小画像に手順「2.」〜手順「10.」の操作を繰り返し設定すると、[ページ編集]画面では図のようにロールオーバー効果が設定されていることが確認できます。