imageHover.js - manabuyasuda/jquery-plugins GitHub Wiki

スクリプト

• $imageに処理の対象にする要素を指定
• onとoffとcurrentに画像ファイル名の末尾につける状態を指定
• currentがついている場合は処理されない

$(function() {
// @desc - img要素内のsrc属性をマウスオーバーに応じて置換する。プリロードに対応。
function imageHover() {
  var $image = $('img');
  var on = '_on.';
  var off = '_off.';
  var current = '_current.';
  // ページ内に対象の要素がある場合に処理。
  if($image.length) {
    $image.each(function() {
      var $this = $(this);

      if(!$this.attr('src').match(current) && $this.attr('src').match(off)) {

        // imageオブジェクトを生成して、`on`画像のプリロードをする。
        var preloadImage = new Image();
        preloadImage.src = $this.attr("src").replace(off, on);

        // マウスオーバーで`off`を`on`に、マウスアウトで`on`を`off`に変更する。
        $this.hover(
          function() {
            $this.attr('src', $this.attr('src').replace(off, on));
          },
          function() {
            $this.attr('src', $this.attr('src').replace(on, off));
          }
        );

      }
    });
  }
}
imageHover();
});

_off.と一致する場合は_on.に切り替わる。_current.に一致する場合は処理されない。

<img src="example_off.jpg">
<img src="example_current.jpg"">