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

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

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

本家jQuery

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

表示サンプル

サンプルhtml

マウスオーバーのサンプル

この手のものは、ちょっとググれば、すごい人たちがいろんなタイプのものを公開しているので、自分にあったものを選んで使ってくださいませ。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする