【jQuery】画像にカーソルを重ねると別の画像ファイルに切り替わる

今ではもう中々使われない画像にカーソルを重ねると切り替える動作。

以前は文字付ナビゲーション画像にカーソルを重ねると切り替わるという時によく使われていたけど、今では装飾がある程度CSSでできるようになってからは使われなくなっている。

けど、レスポンシブ対応のためにスマホの場合は別の画像に切り替えるというコンテンツ内部に張り付けた画像の場合には今のところまだ使えるJSを使用しての切り替え。

下の参考はカーソルを重ねると切り替わるJS

$(function(){
  $('#nav img').hover(function(){
    $(this).attr('src', $(this).attr('src').replace('_off', '_on'));
  }, function(){
    if (!$(this).hasClass('current')) {
      $(this).attr('src', $(this).attr('src').replace('_on', '_off'));
    }
  });
});

画像側にはファイル名の末尾に「_off」と「_on」の二つを用意し、通常は_offがついてる画像が表示し、カーソルを重ねるとファイル名を置換して_onの画像が表示されるという仕組み。

これをwindowのwidthを取得しスマホサイズであればその画像に切り替えるという方法は普通に役立つ。