jqueryのﾌﾟﾗｸﾞｲﾝを探しています｡以下のようなhtmlがあります｡ -------------------------------------------------- <div style="background:url(bg00.jpg);" id="ar…

jqueryのﾌﾟﾗｸﾞｲﾝを探しています｡

以下のようなhtmlがあります｡
--------------------------------------------------
<div style="background:url(bg00.jpg);" id="area01">あいうえお</div>
<a href="#">ﾎﾞﾀﾝ1</a>
<a href="#">ﾎﾞﾀﾝ2</a>
--------------------------------------------------
ﾎﾞﾀﾝ1にﾏｳｽｵｰﾊﾞｰすると､div#area01の背景画像がbg01.jpgに変わり
ﾎﾞﾀﾝ2にﾏｳｽｵｰﾊﾞｰすると､div#area01の背景画像がbg02.jpgに変わり
ﾏｳｽｱｳﾄするとbg00.jpgに戻るような
jqueryのﾌﾟﾗｸﾞｲﾝ､どこかにないでしょうか？
ｵﾌﾟｼｮﾝで､切り替わる際のｴﾌｪｸﾄが追加できれば尚うれしいです｡

以上､皆さんの知恵をお貸しください！

jQuery の hover() と fadeIn() を使ってみました｡

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<style>
IMG {
 height: 320px;
 position: absolute;
 left: 1em;
}
#i2, #i3 {
 display: none;
}
#area01 {
 height: 320px;
 position: relative;
 padding: 0.5em;
 margin-left: 1em;
 color: white;
}
</style>
<script>
var SPEED = 2000;
$(function() {
 $("#b1").hover(
 function() { $("#i2").fadeIn(SPEED); },
 function() { $("#i2").fadeOut(SPEED); }
 );
 $("#b2").hover(
 function() { $("#i3").fadeIn(SPEED); },
 function() { $("#i3").fadeOut(SPEED); }
 );
});
</script>

<img src="http://cdn-ak.f.st-hatena.com/images/fotolife/a/a-kuma3/20120219/20120219201602.jpg" id="i1">
<img src="http://cdn-ak.f.st-hatena.com/images/fotolife/a/a-kuma3/20120108/20120108135349.jpg" id="i2">
<img src="http://cdn-ak.f.st-hatena.com/images/fotolife/a/a-kuma3/20110726/20110726133847.jpg" id="i3">
<div id="area01">おなか空いた</div>
<p>
<a href="#" id="b1">ﾎﾞﾀﾝ1</a>
<a href="#" id="b2">ﾎﾞﾀﾝ2</a>

jsFiddle で動作確認したのが､↓です｡
http://jsfiddle.net/a_kuma3/xK4uQ/