Javascript(JQuery)で吹き出しを作る(改良)

 以前制作した「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形式でダウンロード

カテゴリー: javascript, ホームページ作成 タグ: , パーマリンク

コメントを残す