マウスオーバー時の画像切り替え方法いろいろ

ウェブの制作で、htmlにちょっと慣れてきたら向かいあう可能性の高い、マウスオンの時の画像切り替えの実装。

自分で把握しているだけで実装方法はいくつかあるが、実際に試してみたのでそのメリットデメリットをメモ。

[adsense]

１．オン用・オフ用の2つの画像をCSSのみで切り替える

aタグのバックグラウンドイメージでオフ用の画像を指定し
マウスオン時に読み込む画像をa:hoverのバックグラウンドで指定する方法。

html

<a class="hoge" src=""></a>

CSS

a.hoge {
 display: block;
 width: 100px;
 height: 100px;
 background: url(/img/hoge_off.png) no-repeat 0 0;
}
a.hoge:hover {
 background: url(/img/hoge_on.png) no-repeat 0 0;
}

●メリット
・JavaScriptなしで動く

●デメリット
・マウスオン時に、画像を読み込むまでの間、瞬間的に画像が何も表示されないことがよくある

[adsense]

２．オン用・オフ用の2つの画像をくっつけた1つの画像を作成し、CSSで表示位置を切り替える

100px x 100px の画像を縦に2つくっつけた、100px x 200pxの画像を作成した場合が以下。

html

<a class="hoge" src=""></a>

CSS

a.hoge {
 display: block;
 width: 100px;
 height: 100px;
 background: url(/img/hoge.png) no-repeat 0 0;
}
a.hoge:hover {
 background: url(/img/hoge.png) no-repeat 0 -100px;
}

●メリット
・JavaScriptなしで動く
・画像切り替えが速くスムーズ

●デメリット
・画像作成の手間がかかる
・ウェブの表示を拡大・縮小したりすると、ブラウザによってマウスオン時の画像の端が、マウスオフ時にも見えてしまうことがある

３．オン用・オフ用の2つの画像を、jQueryで切り替える

今の主流はこれなのでしょうか。

〇〇_off.gifとか〇〇_off.pngという画像あり、そこにマウスオンすると、自動的に
〇〇_on.gifとか〇〇_on.pngに切り替えてくれるという仕様。

html

/*jQuery読込*/
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

/*画像切り替え実装部分*/
<script type="text/javascript">
$(function(){
     $('a img').hover(function(){
        $(this).attr('src', $(this).attr('src').replace('_off', '_on'));
          }, function(){
             if (!$(this).hasClass('currentPage')) {
             $(this).attr('src', $(this).attr('src').replace('_on', '_off'));
        }
   });
});
</script>

<a href=""><img src="/img/hoge_off.gif" /></a>

●メリット
・実装が楽
・画像切り替え時に画像も消えない

●デメリット
・JavaScriptが動くことが必要
・画像切り替え時にややタイムラグあり(画像をプリロードすることで対処可能)

といったところかなと。