画像にロールオーバー効果を加えることについて紹介します
Web ブラウザに表示された画像の上にマウス ポインタを置くと別の画像に切り替わり、マウス ポインタを画像の外に出すと元の画像に戻る ― このような効果を「ロールオーバー効果」と呼びます。
こちらをクリックするとロールオーバー効果を加えた表示例をご覧いただけます。
画像は、水平・垂直方向で同じ向きのものをまずは用意ください。混在する場合は工夫が必要となります。また大きさもさまざまで構わないですが、縦横比が同じ物の方が好ましいです。どうしても縦横比が同じものでない画像が混在する場合は、こちらの説明をご覧ください。
ここでは、ホームページビルダーにて用意されている素材集の中から、640 x 480 ピクセルの写真を使って説明をしております。
① 表を挿入します。
空白セルに空白コードを自動挿入しない
ロールオーバーの画像を配置するための表には、<空白セルに空白コードを自動挿入する>のチェックを外します。
② セルの中に画像や文字を挿入します。
ロゴ文字画像の保存場所を確認しておいてください。
保存されるときの保存フォルダーの場所をメモしておいて、次のステップでこれら画像を読み込む時に役立ててください。
サムネイルとなる小さな画像にマウスポインターを上せた時に、①サムネイル写真に効果が入り、②中央の写真が拡大写真で入替り、③ロゴ文字も写真に合わせたものに入れ替える設定を行います。
マウスポインターが外れた時は、元の画像に戻します。
① サムネイル画像に効果を設定します。
② 中央画像を入れ替えます。
③ ロゴ文字を入れ替えます。
ロゴ文字画像の保存場所を確認しておいてください。
先にロゴ文字を作成し保存した時の保存フォルダーの場所をメモしておいて、このステップでこれら画像を読み込む時に役立ててください。
④ 他のサムネイル写真についても、同じようにロールオーバー効果を設定します。
サムネイル写真の間隔の調整
画像と画像の間にすきまがあり、そのスキマをマウスが通過するときにロールオーバー効果が一瞬無くなってしまうのを防ぐには、画像の間隔を最小にするとよいでしょう。
まず表全体を選択し、「属性の変更」 で 「表」 のタブの中の、<罫線の幅> と <セル内の余白> をそれぞれ 0 と 1 ピクセルにします。また <枠表示>のチェックを外して、枠を表示しないようにするとスッキリします。