THE HAM MEDIA BLOG

jQueryのロールオーバーもたくさん出ていますが、
多くで使われているのは、画像のsrcを変化させるものだと思います。
例えばyuga.jsでのロールオーバーもsrcを変化させるものだ。

僕もそのスクリプトをを今まで使っていたが、
それだとIE6などでは何度も画像をダウンロードしにいってしまう。
また、場合によっては他のブラウザでもちらつきなどが起きる場合もある。

特に問題はないのだけど、気になる人もいるという話を聞いて、
ちらつきが起きなかったり、何度も読みに行かないようにするスクリプトを
考えて作ってみることにした。

ロールオーバーサンプル

◆スクリプト

$(function(){
  $('.over').each(function(){
      //srcセット
      rolloverSrc = $(this).attr('src').replace(/(\.gif|\.jpg|\.png)$/, "_on"+"$1");

      //イメージセット
　　　$(this).clone().insertAfter(this)
        .attr('src',rolloverSrc)
        .css('display','none');

      //ロールオーバー(マウスオン時)
      $(this).mouseover(function(){
        $(this).hide();
        $(this).next().show();
      });
      //ロールオーバー(マウスアウト時)
      $(this).next().mouseout(function(){
        $(this).hide();
        $(this).prev().show();
      });
  });
});

◆プレビュー

仕組みの違い

従来の仕組みはimgのsrc部分の最後を
_onなどがあるものと切り替えるロールオーバー。

今回の仕組みは、指定の画像のクローンを真後ろにつくり、
srcをロールオーバー後の画像に変化させておく。
あとはロールオーバーしたときに、今見えているものを見えなくし、
見えていないものを見えるようにするという仕組み。
ちょうどjQueryのtoggleと同じような仕組みになっている。
なので、単純にtoggle rolloverとでもしておこうと思う。

簡単に使いたい人用にプラグイン

今回のロールオーバーを簡単に使えるように
プラグインとしてダウンロードできるようにしました。
右クリックの名前をつけて保存などでダウンロードしてください。

ダウンロード：jQuery ToggleRollover Plugin

プラグインの使い方

今回のもjQueryが無いと動かないので、ダウンロードしてきてください。
そして今回のプラグインもダウンロードしておく。

二つのjsを利用するために、head内に記述。

<script src="js/jquery.js" type="text/javascript"></script>  

<script src="js/jquery.togglerollover-1.0.js" type="text/javascript">
</script>  

■デフォルトでの使用

簡単に使いたい人は、ロールオーバーさせたい画像に
class="over"を指定してください。

<img src="##" alt="##" class="over" />

■セレクタを指定しての使用

ロールオーバーさせたいところを自分で指定したい場合は、
下記のような記述をscript内に記述してください。

$(function(){
	$('.hoge').toggleRollover();
});

.hogeの部分を適応させたい画像のセレクタにしてください。

ロールオーバーのみを使いたい場合などに使ってください。
また、何かバグなどがあれば報告いただけたらうれしいです。