jQueryで画像のロールオーバーを実装

jQuery2011年1月10日

画像のロールオーバーの方法は多くのサイトで紹介されていますが、フルスクラッチで書くとそれなりにコードも増え、汎用性を持たせるのも少々大変です。私の場合はjQueryで多くの機能を実装することが多いため、ロールオーバーもjQueryで実装してみました。

• jQueryはこちらからダウンロード
• 実際のサンプル

HTML

<p class="roll"><a href="#"><img src="test.gif" alt="" width="200" height="49" /></a></p>

Javascript

'jQuery' in window && (function($) {
$(document).ready(function($) {
var postfix = '_o';
$('.roll img,img.roll').not('[src*="'+ postfix +'."]').each(function() {
var img = $(this);
var src = img.attr('src');
var src_o = src.substr(0, src.lastIndexOf('.'))
+ postfix
+ src.substring(src.lastIndexOf('.'));
$('').attr('src', src_o);
img.hover(
function() {
img.attr('src', src_o);
},
function() {
img.attr('src', src);
}
);
});
});
})(jQuery);

使用方法

1. デフォルト画像test.gifとロールオーバーする画像test_o.gifを作成
2. JavascriptファイルまたはHTMLに上記コードを挿入

また、src属性で指定した画像に_oが付いている場合はロールオーバーの処理を実行しないようにしています。これにより、アクティブなページで初めから_o付きの画像を指定したい時も、IDやClassを指定する必要が無くなります。

• jQueryでテーブルをラジオボタンでソート（プラグインなし）
• jQueryでブロックレベルの高さを揃える

この記事を読んでいる方にオススメの記事

• jQueryjQueryで印刷用ページを展開する
• jQueryjQueryでローテーションバナーを実装
• jQueryjQueryでブロックレベルの高さを揃える
• jQueryjQueryで、透過pngをIE6に対応させる
• jQueryニュースティッカーをjQueryで実装する／jquery.slider編
• jQueryニュースティッカーをjQueryで実装する／bxslider編

「jQuery」の他の記事を読む

• ※承認制のため、即時には反映されません。