THE HAM MEDIA BLOG

jQuery:何度も画像の読み込みをしないロールオーバー

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery plugin自作
タグ:
jquery
javascript
プラグイン
plugin

何度も画像の読み込みをしないロールオーバー

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();
      });
  });
});

◆プレビュー

rollover

仕組みの違い

従来の仕組みは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の部分を適応させたい画像のセレクタにしてください。

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

参考サイト:
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

[TODAY's TOPIC] 1 December, 2008
Excerpt: [CSS]一枚の画像で、四隅が角丸のパネルを実装するスタイルシート JavaScript 内で無圧縮 ZIP を作って Data URI を生成するライブラリ...
Weblog: Movable Type 備忘録
Tracked: 2008-12-01 23:46

トップに戻る

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。