jQueryでロールオーバー

Webサイトを華やかに表現する手法の基本となるのがロールオーバー。
 

画像等にマウスカーソルが重なると、他の画像に切り変える手法です。

そして、ロールオーバーには様々な手法が存在します。

では、どの方法を使うのが良いのか？
 

という疑問を抱かれる方が、いらっしゃるのではないかと思います。

答えは・・・どれでも構いません。
 

特に「これを使わないといけない！」というルールは存在しません。

ユーザーにどこを選んでいるか、

迷わずに誘導させることができていれば良い訳です。

数ある作り方の中でも、

「旬」という事を考えると『jQuery』を使用するのも、ひとつの手だと思います。

『jQuery』はこちらのブログの中でも数々ご紹介されておりますが、

JavaScriptライブラリと呼ばれるプログラムの集まりになります。

その『jQuery』のシェアは下図で示す通り、

JavaScriptライブラリの中でもダントツに高いのです！

jQueryを使用してロールオーバーを作る際の注意点として、

ロールオーバーで変更される画像を予め読み込ませておく必要があります。

ロールオーバーで変更される画像が読み込まれるタイミングは、

変更もとの画像の上に初めてマウスが乗った時です。
 

つまり、マウスが乗って画像が切り替わるまでに、

新たに表示される画像をダウンロードする時間が必要になるという事です。

よって先に画像を読み込ませておかないと、

画像の変更処理時にチラつきが発生してしまいます。

後は考え方次第で、汎用的なものにカスタマイズする事もできます。
 

例えば画像が沢山ある場合、

その都度、プログラムを記述をしていくのは大変ですので、

ロ ールオーバーで切り替える画像のファイル名を

決まったルールに統一することによって、

プログラムを簡略化させる事もできます。
 

このような方法は様々なサイトに載ってますので、

是非皆さんもチャレンジしてみてください。

--------------------------------------------------------------------------------

パソコンスクール KENスクール横浜校　Webインストラクター
http://www.kenschool.jp/school/yokohama/index.html

KENスクールでjQueryを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html