![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
下記のサイトにある吹き出しをメニューボタンのように複数の画像に反映させたいのですが、どのようにすればよいでしょうか?
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ベストアンサー
- 回答日時:
ご提示されているサンプルは、汎用的なプラグインというよりは、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の改造が必要でしょうか?
No.2
- 回答日時:
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のサイズ等も鑑みて、ここを調整すればよいかと。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
【jQuery】2分割レイアウトで、...
-
【iOS及びAndroid】リンク画像...
-
Slick.jsのオプションrtlについて
-
チェックボックスと画像切替の連動
-
textareaに画像を表示したい
-
MAX関数を使ってからLEFT JOIN...
-
HTMLからimgのsrcのみを正規表...
-
Vb.net2005での画像の合成方法
-
Javascriptで画像を水面のよう...
-
【CSS】floatで左右に並べた...
-
前回の質問の続き
-
jqueryのsortableで一部ソート...
-
removeEventListenerについて
-
<div ~ </div> で囲まれたテキ...
-
画像が表示でnull; this.src
-
c++std::string型をTCHARに変換...
-
取得した要素がインライン要素...
-
クリックで色変更後に既に変更...
-
CSS <div>の入れ子が反映さ...
-
OpenCVの実行エラー
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
同一ページ内の複数のタグに同...
-
【jQuery】2分割レイアウトで、...
-
キャラクターがぴょこんと飛び...
-
画像をフェードアウト&フェー...
-
jqueryのプラグインslickの画像...
-
html5に変えるとスライドショー...
-
Javaスクリプトで画像を縦にス...
-
high slideをFC2ブログで
-
ご教授ください。
-
jQueryでタブ、スライダーを使...
-
チェックボックスと画像切替の連動
-
jQueryのclickイベントハンドラ
-
javascriptで文字サイズの変更
-
fontsize.jsでhtmlの大中小の設...
-
【iOS及びAndroid】リンク画像...
-
Firefoxとクロームでフェードイ...
-
javascript src書き換え
-
神経衰弱 順番に裏返し
-
アコーディオンメニューが開い...
おすすめ情報