/*-------------------------------------- ポップアップテキストを表示する。 2010/1/20 森 政治 popup7からの変化点： ① リ・オルグ社納入に向けて雲の変更 HTMLからは、次の３つの関数を呼びます。 popup.config： 動作の設定 popup.on： テキストを表示する popup.off： テキストを消す 詳細は、★の箇所をお読みください。 参考１：http://himajin.moo.jp/index.html 参考２：http://www.openspc2.org/JavaScript/Ajax/Ajax_study/chapter05/013/index.html 参考３：http://www.publicroots.com/fmt/archives/000136.html 参考４：http://javascript.eweb-design.com/0814_fio.html 参考５：http://www.openspc2.org/JavaScript/Ajax/Ajax_study/chapter81/013/index.html --------------------------------------*/ var popup = { //★ popup.configで設定対象になる変数 font_size:12, //テキストのサイズ（px) font_color:"#000000", //テキストの色 font_style:"normal", //テキストのフォントスタイル font_weight:"normal", //テキストのフォントウェイト opacity:100, //透過度（0で完全透過、100で透過しない） line_height:14, //テキストのline-height(px) text_indent:12, //テキストのtext-indent(px) onTimer:200, //出すまでの待ち時間(ms) offTimer:10000, //強制的に消すまでの時間(ms) //holdTimer:200, //マウスが外れてもポップアップを維持する時間（ms） offsetX:0, //標準出現位置に対する横方向相対位置（px） offsetY:0, //標準出現位置に対する縦方向相対位置（px） baloon_folder:"", //吹出画像が保存されているフォルダのURL baloon_filename:"popup_baloon", //吹出ファイル名。この後に1～4の数字と属性（.gif又は.png） //が付加されて最終ファイル名になる。例：poup_baloon1.png //吹出の形状に応じて設定が必要な変数 width:322, //吹出の初期幅(px) text_width:238, //テキストボックスの幅の初期値(px) text_height:90, //テキストボックスの高さの初期値(px) max_text_width:500, //テキストボックスの最大幅(px) space_margin:1.7, //テキストボックスの面積の余裕度 br_margin:25, //テキストに含まれる"タグの中で、かつ#popbaloonと#mytextの書き込み後に呼ぶこと。 //★ 呼び方の例： //★ popup.config({baloon_folder:"./images/", opacity:100}); //★ 注：configで設定対象になる変数名のうち、変えたいものだけ記述すれば良い。 config:function (init) { popup.status_id = 1; //変更される変数を設定する if (init.font_size) {popup.font_size = init.font_size;} if (init.font_color) {popup.font_color = init.font_color}; if (init.font_style) {popup.font_style = init.font_style}; if (init.font_weight) {popup.font_weight = init.font_weight}; if (init.opacity) {popup.opacity = init.opacity;} if (init.line_height) {popup.line_height = init.line_height;} if (init.text_indent) {popup.text_indent = init.text_indent;} if (init.onTimer) {popup.onTimer = init.onTimer;} if (init.offTimer) {popup.offTimer = init.offTimer;} if (init.offsetX) {popup.offsetX = init.offsetX;} if (init.offsetY) {popup.offsetY = init.offsetY;} if (init.baloon_folder) {popup.baloon_folder = init.baloon_folder;} if (init.baloon_filename) {popup.baloon_filename = init.baloon_filename;} //ブラウザの判定 popup.browzer = get_browzer(); //alert(popup.browzer); //オブジェクトを取り出す。 popup.baloon = document.getElementById("popBaloon"); popup.text = document.getElementById("mytext"); popup.pop_text = document.getElementById("pop_text"); popup.pop_text_big = document.getElementById("pop_text_big"); popup.baloonBig = document.getElementById("baloonBig"); popup.baloonTop = document.getElementById("baloonTop"); popup.baloonMid = document.getElementById("baloonMid"); popup.baloonBot = document.getElementById("baloonBot"); popup.baloonRight = document.getElementById("baloonRight"); //吹出画像のフルURLを生成する for (var i=1; i<=4; i++) { popup.baloon_URL[i-1] = popup.baloon_folder + popup.baloon_filename + i; //IE6ではpng透過が利用できないのでgifを選択する if (popup.browzer == "IE6") { popup.baloon_URL[i-1] += ".gif"; popup.baloonTop.style.background = "url("+popup.baloon_folder+"baloonTop.gif)"; popup.baloonMid.style.background = "url("+popup.baloon_folder+"baloonMid.gif)"; popup.baloonBot.style.background = "url("+popup.baloon_folder+"baloonBot.gif)"; popup.baloonRight.style.background = "url("+popup.baloon_folder+"baloonDot.gif)"; } else { popup.baloon_URL[i-1] += ".png"; } } }, //★-------ポップアップテキストを表示する関数。HTMLからはonmouseoverで呼ぶ。------------ //★ 呼び方： //★ onmouseover="popup.on({id:this.id, pos:1, text:'ポップアップテキスト'})" //★ id： ポップアップが指し示すオブジェクトのid //★ pos: オブジェクトの基準位置 1:Bottom,Right 2:Bottom,Left 3:Top,Left 4:Top,Right //★ text: ポップアップ表示するテキスト //★ 注： posは無くても構わない。無い場合は自動的に選択される。 on:function (popU){ var set_x = 0; //マウスカーソル位置に対する吹出の原点の相対位置x var set_y = 0; //マウスカーソル位置に対する吹出の原点の相対位置y var rx = 0; //吹出の絶対位置x var ry = 0; //吹出の絶対位置y var tx = 0; //テキストボックスの相対位置x var ty = 0; //テキストボックスの相対位置y var sx = 0; //テキストボックスの絶対位置x var sy = 0; //テキストボックスの絶対位置y var St = 0; //テキスト矩形の面積 var Wt = popup.text_width; //テキスト矩形の幅 var Ht = 0; //テキスト矩形の高さ var Rp = 1; //画像の拡大倍率 var brCount = 0; var pos = new Array(3); pos[0] = popU.x; pos[1] = popU.y; pos[2] = 0; pos[3] = 0; //alert(popU.text); popup.baloon.width = popup.width; popup.text.style.width = Wt + "px"; popup.text.style.height = "auto"; //テキストボックスへの一次書込み → 書き込む量に応じてテキストボックスの高さが変動する popup.pop_text.innerHTML = popU.text; popup.pop_text_big.innerHTML = popU.text; //大きな吹出しに対してmax-heightと同等な処理を行う if (popup.pop_text_big.offsetHeight > 500) { popup.pop_text_big.style.overflow = "scroll"; popup.pop_text_big.style.height = "500px"; } //アルファ値を制御する if (popU.alpha) { popup.baloon.style.filter="alpha(opacity="+popU.alpha+")"; popup.baloon.style.opacity=popU.alpha/100; popup.baloon.style.MozOpacity=popU.alpha/100; popup.baloonBig.style.filter="alpha(opacity="+popU.alpha+")"; popup.baloonBig.style.opacity=popU.alpha/100; popup.baloonBig.style.MozOpacity=popU.alpha/100; } //テキストに含まれる" popup.text_height) { St = popup.text_width * (Ht + brCount * popup.br_margin) * popup.space_margin; //テキストボックス面積の余裕をとる Ht = Math.round(Math.sqrt(St / popup.hv_ratio)); Wt = Math.round(St / Ht); if (Wt > popup.max_text_width) { Wt = popup.max_text_width; Ht = Math.round(St/Wt); popup.bigBaloon = true; } Rp = Wt / popup.text_width; //倍率の決定 popup.baloon.width = Math.round(popup.width * Rp); popup.text.style.width = Wt + "px"; popup.text.style.height = Ht + "px"; pos[1] = pos[1] * (0.5 + 0.5 * Rp); } else { Rp = 1; } //ポップアップテキストの基準位置が指定されていない場合の自動決定 if (!popU.pos) { //検出されたマウス座標からスクロール量を差し引く var viewX = pos[0] - (document.documentElement.scrollLeft || document.body.scrollLeft); var viewY = pos[1] - (document.documentElement.scrollTop || document.body.scrollTop); //表示領域の幅と高さの半分の値を知る var midX = (document.documentElement.clientWidth || document.body.clientWidth)/2; var midY = (document.documentElement.clientHeight || document.body.clientHeight)/2; //デバグ //window.alert("viewX="+viewX+" midX="+midX+" popup.x="+popup.x); //デバグ //popU.posの決定 if (viewX <= midX && viewY <= midY) { popU.pos = 1; } else if (viewX > midX && viewY <= midY) { popU.pos = 2; } else if (viewX > midX && viewY > midY) { popU.pos = 3; } else { popU.pos = 4; } } //popU.posに応じて吹出の初期オフセット値と、テキストボックス原点の初期値と、 //吹き出し画像を決定する。 if (popU.pos == 1) { //left top set_x = popup.offsetX + pos[2] - 10; set_y = popup.offsetY + pos[3] - 10; tx = set_x + Math.round(popup.textOffsetX[0] * Rp); ty = set_y + Math.round(popup.textOffsetY[0] * Rp); popup.baloon.src = popup.baloon_URL[0]; } else if (popU.pos == 2) { //right top set_x = -popup.baloon.width - popup.offsetX + 10; set_y = popup.offsetY + pos[3] - 10; tx = set_x + Math.round(popup.textOffsetX[1] * Rp); ty = set_y + Math.round(popup.textOffsetY[1] * Rp); popup.baloon.src = popup.baloon_URL[1]; } else if (popU.pos == 3) { //right bottom set_x = -popup.baloon.width - popup.offsetX + 10; set_y = -popup.offsetY + 10; tx = set_x + Math.round(popup.textOffsetX[2] * Rp); ty = set_y + Math.round(popup.textOffsetY[2] * Rp); popup.baloon.src = popup.baloon_URL[2]; } else { //left bottom set_x = popup.offsetX + pos[2] - 10; set_y = -popup.offsetY + 10; tx = set_x + Math.round(popup.textOffsetX[3] * Rp); ty = set_y + Math.round(popup.textOffsetY[3] * Rp); popup.baloon.src = popup.baloon_URL[3]; } //マウス座標に初期オフセット値を加算してポップアップ吹出の初期原点を決定する rx = pos[0] + set_x; ry = pos[1] + set_y; sx = pos[0] + tx; sy = pos[1] + ty; //テキストボックスの原点座標を決定する popup.baloon.style.left = popup.baloonBig.style.left = rx +"px"; popup.text.style.left = sx + "px"; //Yオフセット値の設定に対処 if (popU.offsetY) { sy += popU.offsetY; } //下辺が基準になる場合の原点位置を最終決定する if (popU.pos == 3 || popU.pos == 4) { sy = sy - popup.baloon.height; ry = ry - popup.baloon.height; } popup.baloon.style.top = popup.baloonBig.style.top = ry +"px"; popup.text.style.top = sy + "px"; //遅延表示 popup.delay_on = setTimeout("popup.display_on()",popup.onTimer); }, //★---------ポップアップを消す関数。HTMLからはonmouseoutで呼ぶ。---------- //★ 呼び方： //★ onmouseout="popup.off()" //★ 注：引数は不要 off:function () { //alert("off処理に入りました"); clearTimeout(popup.delay_on); clearTimeout(popup.force_off); popup.display_off(); }, offTimerTimeout:function() { //alert("timeout"); FlaJs.noticePopupOff(); popup.off(); }, //-----マウスが外れても指定の時間ポップアップを維持するための関数-------- //hold_start:function() { // popup.hold_on = setTimeout("popup.display_off()",popup.holdTimer); //}, //-----吹き出しを強制的に消す関数---------------- forceOff_start:function(){ popup.force_off = setTimeout("popup.offTimerTimeout()", popup.offTimer); }, //--------------ポップアップを消す関数--------------- display_off:function() { popup.text.style.visibility = "hidden"; popup.baloon.style.visibility = "hidden"; popup.pop_text_big.style.visibility = "hidden"; popup.baloonBig.style.visibility = "hidden"; //fdIn.cnt = 0; }, //-------------テキストを表示する内部関数：setTimeoutで呼ぶ。-------------- display_on:function () { if (popup.bigBaloon) { popup.baloonBig.style.visibility = "visible"; popup.pop_text_big.style.visibility = "visible"; } else { popup.baloon.style.visibility = "visible"; popup.text.style.visibility = "visible"; } popup.bigBaloon = false; popup.force_off = setTimeout("popup.offTimerTimeout()",popup.offTimer); //if (popup.browzer != "IE") {fdIn.fdInFunc();} }, //------------マウス座標を取得する内部関数。window.onmousemoveで呼ぶ。----------- //使っていない //参考：http://www.openspc2.org/JavaScript/Ajax/Ajax_study/chapter05/013/index.html getXY:function (evt){ if (popup.browzer == "IE"){ //IE popup.x = document.documentElement.scrollLeft + event.clientX; popup.y = document.documentElement.scrollTop + event.clientY; }else{ //IE以外 popup.x = evt.pageX; popup.y = evt.pageY; } } }