マウスオーバー時にonとoffの画像を切り替える。
- ファイル名の_onと_offで自動判別する
- replaceはJavaScriptの組み込み関数。正規表現と後方参照を使った置換が可能
$(function() {
$('a img').hover(
function() {
$(this).attr('src', $(this).attr('src').replace(/(.*)_off.([a-zA-Z0-9]+)$/, '$1_on.$2'));
},
function() {
$(this).attr('src', $(this).attr('src').replace(/(.*)_on.([a-zA-Z0-9]+)$/, '$1_off.$2'));
}
);
});
少しのコードで実装可能な20のjQuery小技集 | Webクリエイターボックスを参考に作成。オフになったときの処理がいまいちよくわからなかった。