imageHover.js

スクリプト

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

$(function() {
// @desc - img要素内のsrc属性をマウスオーバーに応じて置換する。
// @example html
// <img src="example_off.jpg" class="js-image-hover">
function imageHover() {
  var $image = $('.js-image-hover');
  var on = '_on.';
  var off = '_off.';
  var current = '_current.';
  // ページ内に対象の要素がある場合に処理。
  var $images = $image.length;
  if($images) {

    $image.each(function() {
      var $this = $(this);

      // src属性に`_current.`が入ってない場合に、
      // マウスオーバーで`_off.`を`_on.`に
      // マウスアウトで`_on.`を`_off.`に変更する。
      if(!$this.attr('src').match(current)) {
        $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" class="js-image-hover">
<img src="example_current.jpg" class="js-image-hover">