jQueryを使った画像の切り替え方法を教えてください

［文字サイズ大］［文字サイズ中］［文字サイズ小］
などのボタン画像を押したら、
フォントサイズを変更すると共に、
ボタンが押された状態の画像に切り替えたいのですが、
それをjQueryを使って実行する方法を教えてください。

http://www.lllcolor.com/web/jquery/29.html
↑フォントサイズ変更のスクリプトはこのページのものを拝借しました。

http://weboook.blog22.fc2.com/blog-entry-6.html
↑画像切り替えはこのようなシンプルなものにしたいです。

jQuery版を探したのですが、高機能なものは見つかるのですが
シンプルでなおかつ自分で組み込めそうなものが見当たらなかったので…。

★HTMLは単純にこんな感じです
<a href="#" class="sizeL"><img src="img/fontL.gif"></a>
<a href="#" class="sizeM"><img src="img/fontM.gif"></a>
<a href="#" class="sizeS"><img src="img/fontS.gif"></a>

No.1 回答者： steel_gray 回答日時： 2008/04/27 17:13

文字サイズ変更+ボタン画像の変更で。

選択中なボタンの画像ファイル名は ～on と仮定してます。

<script type="text/javascript">
$(function(){

$(".size_change img").click(function(e){
var evt = e||window.event;
var IMG = evt.srcElement||evt.target;
$("body").removeAttr("class");
if(IMG.src.match(/fontL/)){
$("body").addClass("fontL");
$(".size_change img")[0].src = 'img/fontS.gif';
$(".size_change img")[1].src = 'img/fontM.gif';
$(".size_change img")[2].src = 'img/fontLon.gif';
} else if(IMG.src.match(/fontS/)){
$("body").addClass("fontS");
$(".size_change img")[0].src = 'img/fontSon.gif';
$(".size_change img")[1].src = 'img/fontM.gif';
$(".size_change img")[2].src = 'img/fontL.gif';
} else {
$("body").addClass("fontM");
$(".size_change img")[0].src = 'img/fontS.gif';
$(".size_change img")[1].src = 'img/fontMon.gif';
$(".size_change img")[2].src = 'img/fontL.gif';
}
});
});
</script>


HTML部分(ulじゃなくてもいいけど、何か3つのimgを囲う要素が要る)
<ul class="size_change">
<li><img src="img/fontS.gif"></li>
<li><img src="img/fontMon.gif"></li>
<li><img src="img/fontL.gif"></li>
</ul>