以前制作した「Javascript（JQuery)で吹き出し」のサンプルを改良しました。改良点は、設定を簡易にし、ロールオーバー時の処理を早くなるように改良しました。今回のサンプルでは、mapタグを使用していますが、mapタグを使わなくても可能になっています。mapタグを使用しない場合は、ロールーオーバー元の要素にクラスを設定してください。 吹き出しサンプル 使い方 ・htmlファイル mapのarea要素に class=”PopArea”を追加 mapでなくても可能です 設定例 <area shape=”rect” coords=”333,109,433,209″ class=”PopArea”> ホップアップしたい要素にclass=”BaloonItem”を設置 data-pop属性を入れ、値で表示位置を決めます 上側 Top 下側 Bottom 左側 Left 右側 Right 左上 LeftTop 左下 LeftBottom 右上 RightTop 右下 RightBottom 設定例 <div class=”BaloonItem” data-pop=”Bottom”> ・jsファイル 表示する要素の位置は、/js/java.js内の下記の部分を変更してください。 var px = 15; var py = 15; ソースコードは、以下のようになっています。もし良かったらダウンロードしてください。 tar形式でダウンロード zip形式でダウンロード
