【jQuery】マウスオーバーで画像を切り替える

2014/8/10 HTML, JavaScript

マウスオーバーはいくつか手法がありますが、ここではjQueryを使ったシンプルなマウスオーバーのサンプルを紹介します。

当然のことですがjQueryが必須になりますので、以下からダウンロードするか、CDNを読み込むなりしてください。

HTML

<div><img src="images/dummy.gif" alt="" class="overImg"></div>

JavaScript

// imgに class="overImg"をつける
// オンマウス画像の末尾に「_over」をつける
$(function() {
  var postfix = '_over';
  $('img.overImg').not('[src*="'+ postfix +'."]').each(function() {
    var img = $(this);
    var src = img.attr('src');
    var src_over = src.substr(0, src.lastIndexOf('.')) + postfix + src.substring(src.lastIndexOf('.'));
    $('<img>').attr('src', src_over);
    img.hover(
      function() {
        img.attr('src', src_over);
      },
      function() {
        img.attr('src', src);
      }
    );
  });
});