まさにミラクル！
ロールオーバー効果ってしってますか？
二枚の画像を使って、マウスが乗った時に違う画像を表示させるテクニックです。
ロールオーバー効果がついていると、リンク画像ボタンが、とてもわかりやすいです。
←マウスをこのオヤジの上に載せてください。

今回は、たった３枚の画像だけで、複数のロールオーバー効果のついたリンクの作り方です。
ヘッダー部分にある、横列のナビゲーションをGナビと言いますが、この部分を例にします。
　
　
まずはじめに前回やった、やっぱりスライスするんだよね　と同じ方法で、テーブルの背景に表示させた画像の上に透明画像をリンクに使ったものを作ります。
そして、さらにロールオーバー効果(マウスが乗った時に別の画像に入れ替える)させる方法です。

Step01
まず、前回やったようにテーブルの背景に画像、そして透明の画像を使ったところまで作ります。　このページの巾が狭いので、とりあえず横２列です。
　↑336x40の画像を背景に設定
　　リンクは、このページの上部に移動するだけです。


Step02
つぎに、これにロールオーバー効果を加えます。
使用するのは、↓この画像。


わかりずらいので、背景色を黄色にしたテーブルの上に置いてみました。
この画像は、枠の外側が白で縁が細い黒で中が透明にしてあります。


Step03
完成品は、こちらです。
透明画像に、ロールオーバー効果を加えました。
↓画像の上にマウスを乗せてみてください。

どうですか？
まるで大きさの違う２枚の画像を使ってロールオーバーされているように見えますよね。
通常、このロールオーバー効果というのは、例えば、G-NAVIに５個のリンクがあれば、通常は、10枚の画像が必要になってきますが、この方法ですと、どれだけリンクボタンが増えても(但しサイズは同じに限る)、画像は、たった３枚だけで、複数のロールオーバー効果が作れるというわけです。

名前を変更する必要があるときも、このやり方なら、リンクやロールオーバー効果を、まったくいじらないで、背景の画像だけを交換するだけなので、とても簡単です。


　　↓このサイトでも使ってます。
タチバナ課長のミニトランポリン普及委員会　

今回の話も、初心者のかたには、すこし難しかったかもしれませんね。


奇跡のWeb Tipsのメニューに戻る