Javascript（JQuery)で吹き出しを作る – ボンシのサイクリング＆グルメ道

　今回は、マウスオーバーした時に吹き出しを出すサンプルです。今まではサイトのサンプルを利用していたのですが、細かい設定ができなかったり、処理速度が重かったりしたので、自分で作って見ました。
　内容は、マウスオーバーしたとき、吹き出しがマウスと同期して動くようになっています。また、吹き出しの表示位置は、Class名を変更ことで位置の調整ができます。マウスからの距離は、Javascriptファイルの設定値を変更することで変更できます。

吹き出しサンプル
Javascript（JQuery)吹き出しサンプル
サンプルをもっと見たい方はこちら

使い方

htmlファイルの設定
・ポップアップさせたい要素に、Class「PopUpItem」を付けてください。Classの「-Left」は表示位置になります。無い場合は、マウスの右下に表示されます。

・ポップアップさせる要素には、Class「BaloonItem」を付けてください。

・複数表示がある時は、「PopUpItem」と「BaloonItem」は記載している順番に対応します。

「java.js」の設定
//オーバした時のクラス名　PoNameは「.」を入れないで下さい。
var PoName = “PopUpItem”;

//表示したい要素のクラスの値
var BaClass = “.BaloonItem”;

//マウスから表示する要素のの距離 10以上の数字
var pxx = px = 10;
var pyy = py = 10;

ソースコードは、以下のようになっています。もし良かったらダウンロードしてください。
tar形式でダウンロード
 zip形式でダウンロード