|
|
|
マウスオーバーについて
マウスを乗せると変化が起こる、というのを見かけることは頻繁にあり、総称して「ロールオーバー」などと呼ばれています。
このページではロールオーバーを中心に、またマウスオーバーでメニューを表示したりなど、「マウスを乗せる」イベントについて特集しました。
最もシンプルなロールオーバーとしてリンクの文字色があり、非常に頻繁に見かけますが、
これはスタイルシートのa:hoverを利用すると、文が簡潔で済み、またJavaScriptに対応していないブラウザでも表示できますので、
そちらの利用をお勧めします。
設置のアドバイス
このページのスクリプトはイベントハンドラを多用するため、少々HTMLの部分が煩雑になります。
ここで登場する代表的なイベントハンドラはonMouseOverとonMouseOutです。
これらはマウスが重なったとき、離れたときにそれぞれイベントを発生させるもので、「マウスオーバー関連」とあるからにはほぼ全てのコンテンツでこれらのハンドラが登場します。
大抵は<span>タグなどの属性として記されているため、内容を追加したい場合はこれらのハンドラも一緒にコピーしてください。
このページの一部のスクリプトはDHTMLを利用しますので、
スタイルシートのページを一通り見ておくとスクリプトの動きが少し分かると思います。
サンプルプログラム
マウスを乗せると画像が変わるロールオーバーです。このページのナビゲーションに利用されているものの簡略版です。
このスクリプトの詳細はこちらから。
|
マウスオーバー関連