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

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

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

スポンサーリンク

シェアする

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

フォローする