javascriptを使ったロールオーバー

すごく久しぶりに同年代からご飯を奢ってもらったYu-ichiです :neko:

今回はちょっとしたロールオーバーの方法をご紹介したいと思います :kaomoji6:

普通、ロールオーバーというと

こんな記述のものが簡単でよさげですが、画像サイズが大きくなると
切り替えの際に読み込みに時間がかかり、一瞬チラついてしまいます。

予め使う画像をプリロードしておく方法もありますが、
使う画像をいちいち定義するのがめんどくさい。

そこで、こんな方法はいかがでしょうか？

【　方　法　】
１．画像を準備する

ロールオーバー後のファイル名は、
ロールオーバー前のファイル名に「_o」を追加してください。

これがロールオーバー後の合図となるので、
ロールオーバー前のファイル名にはつけないでください。

【ロールオーバー前】ロールオーバー前.拡張子

【ロールオーバー後】ロールオーバー前_o.拡張子

２．スクリプト・タグを記述する

<head>タグ内におまじないを記述します。


<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>

Googleのjqueryの呼び出しですね。
それともう１つ、「roll.js」とか適当な名前でjsファイルを作成し、
その中に以下の記述をコピーしてください。

$(function(){
  $("img.o_o").mouseover(function(){
    $(this).attr
    ("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_o$2"))
  }).mouseout(function(){
    $(this).attr
    ("src",$(this).attr("src").replace(/^(.+)_o(\.[a-z]+)$/, "$1$2"));
  }).each(function(){
    $("<img>").attr
    ("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_o$2"))
  })
})

プリロード付きのロールオーバー記述です。
それを同じく<head>タグ内で呼び出します。
<script src="/roll.js" language="javascript" type="text/javascript">
</script>

これで下準備は完了。
あとはロールオーバーさせたい画像をそのまま挿入し、
ロールオーバー専用のクラスをつけます。
<img src="画像パス" width="横幅" height="高さ" class="o_o">

たったこれだけで、チラつきのないプリロード付きのロールオーバーが完成です。

テンプレートを使用しているのであれば、
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>

<script src="/roll.js" language="javascript" type="text/javascript">
</script>
を前もって<head>に入れておけば、画像にクラスをつけるだけのお手軽さ。

是非一度、お試しください :neko:

おかげさまで、FC2のブログランキングが1位となりました！ :cat_5:
この調子でがんばりたいと思いますので、引き続き応援クリックをお願い致します。
:onegai: 　 :yubiright: 　　 :yubileft: