javascriptで吹き出し

質問

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

http://www.dvq.co.nz/web-design/create-a-jquery-popup-bubble-effect/

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 · ベストアンサー

ご提示されているサンプルは、汎用的なプラグインというよりは、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/index.html

参考URL：

http://www.lullabot.com/articles/announcing-beautytips-jquery-tooltip-plugin

お礼

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

回答No.2

yyr446

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のサイズ等も鑑みて、ここを調整すればよいかと。