jQueryでバナーに仕掛けを仕込む

サイドバーにある185x40のバナー画像に仕掛けを入れたい。

バナーにマウスを乗せるとマスコットキャラがスルスルと右側に現れて、altの内容を吹き出しに表示したい。
　

HTML

CMSで作られているので変更を加えることができない。

<div id="SIDE">
<ul class="bnrArea">
<li><img src="banner/banner01.png" alt="すばらしいバナーだ"></li>
<li><img src="banner/banner02.png" alt="詳細を書くんだよ"></li>
<li><img src="banner/banner03.png" alt="あれやこれや"></li>
</ul>
</div>

CSS

追加でスタイルを被せる

#SIDE .bnrArea　ul{list-style-type: none;}
#SIDE .bnrArea　li{
background: url(images/caractor.png) no-repeat right;
width: 185px;height: 40px;
}
#SIDE .bnrArea li span.tip{
display:none; 
margin-top: -80px; margin-left: 35px; 
width: 250px; height: 100px;
text-align: center; vertical-align:middle;
line-height: 100px;
}
#SIDE .bnrArea li:hover span.tip{
display:inline; position:absolute; color:#6c6c6c;
background: url(images/tip_fukidasi.png) no-repeat right;
}

span.tipを作成してCSSパワーで表示・非表示を行う。

吹き出しの画像は透過な250x100pxを用意しておく。
ひょっこりと現れるキャラクターはバナーと同じ高さの40pxにしておく。

script

マウスが乗っかったら、横幅を広げる。
alt要素を取得してタグを作成して要素の後ろにぶち込む。

<script type="text/javascript">
<!--
$(function(){
  $("#SIDE > .bnrArea > li").hover(
    function(){
      $(this).stop().animate({"width" : "210px"}, "fast");
      var tooltip="<span class='tip'>" + $("img", this).attr("alt") +"</span>";
      $(this).append(tooltip);
    },function(){
      $(this).stop().animate({"width" : "185px"}, "fast");
    }
  );
});
-->
</script>