javascriptで吹き出し

下記のサイトにある吹き出しをメニューボタンのように複数の画像に反映させたいのですが、どのようにすればよいでしょうか？

http://www.dvq.co.nz/web-design/create-a-jquery- …

javaスクリプトコード
$(document).ready(function(){

$(".info-popup a").hover(function(){
$(this).next("em").stop(true, true).animate({opacity: "show", top: "40"}, "slow");
}, function() {
$(this).next("em").animate({opacity: "hide", top: "70"}, "fast");
});

});

cssファイル
.info-popup {
margin: 0px auto;
padding: 0;
width: 162px;
position: relative;
}
div.info-popup em {
background: url(../image/menu_info_c.gif) no-repeat;
width: 162px;
height: 42px;
position: absolute;
top: 0px;
left: 0px;
text-align: center;
text-indent: -9999px;
z-index: 2;
display: none;
}
#info-icon {
width: 162px;
height: 42px;
background: url(../image/menu_info.gif) no-repeat 0 0;
text-indent: -9999px;
margin: 0 auto;
display: block;
}

htmlファイル
<div class="info-popup">
<a href="information.html" id="info-icon">information</a>
<em>information</em>
</div>


詳しい方、是非、アドバイスをお願い致します。

No.1 ベストアンサー 回答者： yyr446 回答日時： 2009/11/16 13:50

ご提示されているサンプルは、汎用的なプラグインというよりは、jQueryの

基本的な機能を使って吹き出し画像を表示させるやり方の例ですから、
このソースを見て理解出来ないなら、改造はあきらめて、そのまま使って
下記のように複数画像分同じようなコーディングでしのげばよろしいかと。
（menuのDIVにリンク先が二つあり、それぞれ画像がicon1,icon2の例）
htmlファイル
<div class="menu">
<a href="info1.html" id="icon1">info1</a>
<em class='icon1'>information</em>
<a href="info2.html" id="icon2">info2</a>
<em class='icon2'>information</em>
</div>
cssファイル
.menu {
margin: 0px auto;
padding: 0;
width: 162px;
position: relative;
}
div.menu em.icon1 {
background: url(icon1_popup.gif) no-repeat;
width: 162px;
height: 42px;
position: absolute;
top: 0px;
left: 0px;
text-align: center;
text-indent: -9999px;
z-index: 2;
display: none;
}
div.menu em.icon2 {
background: url(icon2_popup.gif) no-repeat;
width: 162px;
height: 42px;
position: absolute;
top: 0px;
left: 0px;
text-align: center;
text-indent: -9999px;
z-index: 2;
display: none;
}
#icon1 {
width: 162px;
height: 42px;
background: url(icon1.gif) no-repeat 0 0;
text-indent: -9999px;
margin: 0 auto;
display: block;
}
#icon2 {
width: 162px;
height: 42px;
background: url(icon2.gif) no-repeat 0 0;
text-indent: -9999px;
margin: 0 auto;
display: block;
}
javaスクリプトコード
$(document).ready(function(){
$(".menu a").hover(function(){
$(this).next("em").stop(true, true).animate({opacity: "show", top: "40"}, "slow");
}, function() {
$(this).next("em").animate({opacity: "hide", top: "70"}, "fast");
});
});

あるいは、もっと汎用的なjQueryの吹き出しようプラグイン
例「BeautyTips」でも使えば楽かな。（下記のImage contentの例）
http://www.lullabot.com/files/bt/bt-latest/DEMO/ …

参考URL：http://www.lullabot.com/articles/announcing-beau …

この回答へのお礼

アドバイス有難うございます。
画像はそれぞれ表示されるようになりました。
しかし、ロールーバー時にicon2_popup.gifが表示される位置がicon1_popup.gifと同じ位置になってしまうんですよね。
この表示位置をそれぞれのメニューボタンの下へ表示させる場合、やはりjsの改造が必要でしょうか？

お礼日時：2009/11/16 15:56

No.2 回答者： yyr446 回答日時： 2009/11/16 16:27

NO.1です。

＜icon2_popup.gifが表示される位置がicon1_popup.gifと同じ位置になってしまうんです＞
それは、cssの中で
.menu {
-　-　-　-
position: relative;
}
div.menu em.icon1 {
background: url(icon1_popup.gif) no-repeat;
-　-　-　-
position: absolute;
top: 0px;
left: 0px;
-　-　-　-
}
としてmenuのDIVに対してpositionを
top: 0px;left: 0px;
に固定してるからです。
iconのサイズ等も鑑みて、ここを調整すればよいかと。