| ロールオーバーは、画像の上にマウスポインタが乗ったときに画像が替わる効果をいいます。例えば、下の画像にマウスを乗せてみてください。さらに、クリックしてみましょう。 |
|
いかがでしたか。マウスが上に乗ったときに画像が替わり、また、クリックした際にも替わったのがおわかりいただけたでしょうか。ロールオーバーを設置するには、いくつかの方法があるようですが、私はあまり詳しくないので、知っている方法で簡単なものをご説明します。
１．ホームページビルダーの場合
ホームページビルダーを開くとタスクメニューに があります。そこを開いてロールオーバー画像の挿入を選びます。通常時の画像を選択し、次に進んでマウスポインタが上にきた場合の画像を選択し、リンク先を挿入して完了します。
そのあとで、さらに、クリックした場合の効果を足したい場合は、ちょっとややこしいのですが、HTMLソースを開いて<head>内の<SCRIPT>と<body>内の実際の画像のタグを手直しします。 |
|
|
|
２．それ以外の場合
上の方法はちょっとややこしかったですね。これからご紹介する方法は、簡単なのですが、画像の先読みがないので変化するのに少しだけ時間がかかってしまいます。また、IE６でしか、確認してません。あしからず…。ちなみに、一番上のロールオーバーはこの方法です。
ここでも上と同じく11.gifは通常の画像、111.gifはマウスが上にきたときに変化する画像、1111.gifはクリックしたときに変化する画像になってます。
この方法では、<head>内は関係なく、挿入したい場所に<form>から</form>までをコピーして、リンク先と、画像ファイル名を直すだけでOKです。
|
|
|
| ここで、onmouseoverはマウスが上にきた場合、onmouseoutはマウスが画像からはなれた場合、onmousedownはクリックした場合です。 |
