/*-------------------------------------- ポップアップテキストを表示する。 2008/9/7 MaMo http://mamo.asablo.jp/blog/2008/09/07/3749286 HTMLからは、次の３つの関数を呼びます。 poptext.config：動作の設定 poptext.on：テキストを表示する poptext.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 --------------------------------------*/ var poptext = { //★ poptext.configで設定対象になる変数名 shadow:"on", //影on/off border_color:"#000000", //ポップアップ窓の枠の色 border_style:"ridge", //ポップアップ窓の枠スタイル background_color:"#FFFFCC", //ポップアップ窓の背景色 font_size:12, //ポップアップテキストのサイズ（px) font_color:"#000000", //ポップアップテキストの色 font_style:"normal", //ポップアップテキストのフォントスタイル font_weight:"normal", //ポップアップテキストのフォントウェイト opacity:80, //ポップアップ窓の透過度（0で完全透過、100で透過しない） line_height:14, //ポップアップテキストのline-height(px) text_indent:12, //ポップアップテキストのtext-indent(px) padding:5, //ポップアップテキストのpadding(px) border:1, //ポップアップ窓の枠の太さ(px) width:150, //ポップアップ窓の幅(px) onTimer:0, //ポップアップ窓を出すまでの待ち時間(ms) offTimer:100000, //ポップアップ窓を消すまでの時間(ms) offsetX:10, //マウスカーソル位置に対するポップアップ窓の横方向相対位置（px） offsetY:10, //マウスカーソル位置に対するポップアップ窓の縦方向相対位置（px） shadowV_URL:"images/shadow_v5.png", //右辺に出す影画像のURL shadowH_URL:"images/shadow_h5.png", //下辺に出す影画像のURL shadowC_URL:"images/shadow_c5.png", //下辺に出す影画像のURL shadowWidth:5, //影画像の幅(px) //内部変数名 text:"", //ポップアップテキスト用divオブジェクト shav:"", //右辺影用画像オブジェクト shah:"", //下辺影用画像オブジェクト shac:"", //右下隅影用画像オブジェクト x:0, //マウス座標X y:0, //マウス座標Y browzer:"", //ブラウザの種類 IE, FF, OP, NN, SF 及び UK（Unknown) setstyle:"", //ポップアップテキスト用divのスタイル delay_on:"", //表示ON待ち時間タイマーオブジェクト delay_off:"", //表示OFF待ち時間タイマーオブジェクト //★--------------動作設定をする関数--------------- //★ HTMLからは、必ずタグの後で呼ぶこと。 //★ ∵

と3つのタグをHTMLに書き込むからです。 //★ 呼び方の例： //★ poptext.config({width:150, timer:0, border:1, shadowWidth:3, opacity:100}); //★ 注：configで設定対象になる変数名のうち、変えたいものだけ記述すれば良い。 config:function (init) { //変更される変数を設定する if (init.shadow) {poptext.shadow = init.shadow;} if (init.border_color) {poptext.border_color = init.border_color;} if (init.border_style) {poptext.border_style = init.border_style;} if (init.background_color) {poptext.background_color = init.background_color;} if (init.font_size) {poptext.font_size = init.font_size;} if (init.font_color) {poptext.font_color = init.font_color}; if (init.font_style) {poptext.font_style = init.font_style}; if (init.font_weight) {poptext.font_weight = init.font_weight}; if (init.opacity) {poptext.opacity = init.opacity;} if (init.line_height) {poptext.line_height = init.line_height;} if (init.text_indent) {poptext.text_indent = init.text_indent;} if (init.padding) {poptext.padding = init.padding;} if (init.border) {poptext.border = init.border;} if (init.width) {poptext.width = init.width;} if (init.onTimer) {poptext.onTimer = init.onTimer;} if (init.offTimer) {poptext.offTimer = init.offTimer;} if (init.offsetX) {poptext.offsetX = init.offsetX;} if (init.offsetY) {poptext.offsetY = init.offsetY;} if (init.shadowV_URL) {poptext.shadowV_URL = init.shadowV_URL;} if (init.shadowH_URL) {poptext.shadowH_URL = init.shadowH_URL;} if (init.shadowC_URL) {poptext.shadowC_URL = init.shadowC_URL;} if (init.shadowWidth) {poptext.shadowWidth = init.shadowWidth;} //ポップアップテキストのスタイル属性を決定する poptext.setstyle = "STYLE='margin:0px;width:"+poptext.width+"px;border:"+poptext.border; poptext.setstyle = poptext.setstyle +"px;filter:alpha(opacity="+poptext.opacity+");-moz-opacity:"; poptext.setstyle = poptext.setstyle +poptext.opacity/100+";opacity:"+poptext.opacity/100; poptext.setstyle = poptext.setstyle +";border-width:"+poptext.border+"px;border-color:"; poptext.setstyle = poptext.setstyle +poptext.border_color+";font-size:"+poptext.font_size; poptext.setstyle = poptext.setstyle +"px;font-style:"+poptext.font_style+";font-weight:"; poptext.setstyle = poptext.setstyle +poptext.font_weight+";background-color:"; poptext.setstyle = poptext.setstyle +poptext.background_color+";border-style:"; poptext.setstyle = poptext.setstyle +poptext.border_style+";color:"+poptext.font_color; poptext.setstyle = poptext.setstyle +";line-height:"+poptext.line_height+"px;text-indent:"; poptext.setstyle = poptext.setstyle +poptext.text_indent+"px;padding:"+poptext.padding+"px;'"; //ブラウザの判定 poptext.browzer = poptext.get_browzer(); //ポップアップテキストを表示する

の準備。z-index=10 if (!document.getElementById("poptext")) { document.write("

"); if (poptext.shadow == "on"){ //ポップアップテキストの右辺影の画像準備。z-index=10 document.write("

"); //ポップアップテキストの下辺影の画像準備。z-index=10 document.write("

"); //ポップアップテキストの右下隅影の画像準備。z-index=10 document.write("

"); } } //オブジェクトを取り出す。 poptext.text = document.getElementById("poptext"); if (poptext.shadow == "on") { poptext.shav=document.getElementById("shadow_v"); poptext.shah=document.getElementById("shadow_h"); poptext.shac=document.getElementById("shadow_c"); } //マウスポジションを得る window.document.onmousemove = poptext.getXY; }, //★-------ポップアップテキストを表示する関数。HTMLからはonmouseoverで呼ぶ。------------ //★ 呼び方： //★ onmouseover="poptext.on({pos:1, text:'ポップアップテキスト'})" //★ pos: 基準位置 1:Top,Left 2:Top,Right 3:Bottom,Right 4:Bottom,Left //★ text: ポップアップ表示するテキスト //★ 注： posは無くても構わない。無い場合は自動的に選択される。 on:function (popU){ var set_x = 0; var set_y = 0; var rx = 0; var ry = 0; //ポップアップテキストの基準位置が指定されていない場合の自動決定 if (!popU.pos) { //検出されたマウス座標からスクロール量を差し引く var viewX = poptext.x - (document.documentElement.scrollLeft || document.body.scrollLeft); var viewY = poptext.y - (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+" poptext.x="+poptext.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 = poptext.offsetX; set_y = poptext.offsetY; } else if (popU.pos == 2) { //right top set_x = -poptext.width - poptext.offsetX - 2 * poptext.padding - 2 * poptext.border; set_y = poptext.offsetY; } else if (popU.pos == 3) { //right bottom set_x = -poptext.width - poptext.offsetX - 2 * poptext.padding - 2 * poptext.border; set_y = -poptext.offsetY; } else { //left bottom set_x = poptext.offsetX; set_y = -poptext.offsetY; } //マウス座標に初期オフセット値を加算してポップアップ窓の初期描画位置を決定する rx = poptext.x + set_x; ry = poptext.y + set_y; //ポップアップテキストのtop,left座標を決定する（y値は暫定） poptext.text.style.left = rx +"px"; poptext.text.style.top = ry +"px"; //innerHTMLを書き込む → 書き込む量に応じてポップアップテキストの高さが変動する poptext.text.innerHTML = "

"+popU.text+"

"; //window.alert(poptext.width); //下辺が基準になる場合のry値を最終決定する if (popU.pos == 3 || popU.pos == 4) { ry = ry - poptext.text.offsetHeight; poptext.text.style.top = ry +"px"; } //デバグ用 //window.alert("winX="+winX+" winY="+winY); //window.alert(poptext.text.offsetTop); //影の位置と幅の決定 if (poptext.shadow == "on") { var offset = 5; //影のずれ量 //右辺の影 poptext.shav.style.top = ry + offset + "px"; poptext.shav.style.left = rx + poptext.text.scrollWidth + "px"; poptext.shav.style.height = poptext.text.offsetHeight - offset + "px"; poptext.shav.style.width = poptext.shadowWidth + "px"; //下辺の影 poptext.shah.style.top = ry + poptext.text.offsetHeight + "px"; poptext.shah.style.left = poptext.text.offsetLeft + offset + "px"; poptext.shah.style.width = poptext.text.scrollWidth - offset + "px"; poptext.shah.style.height = poptext.shadowWidth + "px"; //右下隅の影 poptext.shac.style.top = ry + poptext.text.offsetHeight + "px"; poptext.shac.style.left = poptext.text.offsetLeft + poptext.text.scrollWidth + "px"; poptext.shac.style.width = poptext.shadowWidth + "px"; poptext.shac.style.height = poptext.shadowWidth + "px"; } //遅延表示 poptext.delay_on = setTimeout("poptext.display_on()",poptext.onTimer); }, //★---------ポップアップを消す関数。HTMLからはonmouseoutで呼ぶ。---------- //★ 呼び方： //★ onmouseout="poptext.off()" //★ 注：引数は不要 off:function () { clearTimeout(poptext.delay_on); clearTimeout(poptext.delay_off); poptext.text.style.visibility = "hidden"; if (poptext.shadow == "on") { poptext.shav.style.visibility = "hidden"; poptext.shah.style.visibility = "hidden"; poptext.shac.style.visibility = "hidden"; } }, //-------------テキストを表示する内部関数：setTimeoutで呼ぶ。-------------- display_on:function () { poptext.text.style.visibility = "visible"; if (poptext.shadow == "on") { poptext.shav.style.visibility = "visible"; poptext.shah.style.visibility = "visible"; poptext.shac.style.visibility = "visible"; } poptext.delay_off = setTimeout("poptext.off()",poptext.offTimer); }, //------------マウス座標を取得する内部関数。window.onmousemoveで呼ぶ。----------- //参考：http://www.openspc2.org/JavaScript/Ajax/Ajax_study/chapter05/013/index.html getXY:function (evt){ if (poptext.browzer == "IE"){ //IE poptext.x = document.documentElement.scrollLeft + event.clientX; poptext.y = document.documentElement.scrollTop + event.clientY; }else{ //IE以外 poptext.x = evt.pageX; poptext.y = evt.pageY; } }, //-------------ブラウザ判別の内部関数。-------------------- //参考サイト：http://www.publicroots.com/fmt/archives/000136.html get_browzer:function () { var VarUsrAgt = navigator.userAgent.toLowerCase(); //小文字 var isMac = (navigator.appVersion.indexOf("Mac") != -1); var isWin = (navigator.appVersion.indexOf("Win") != -1); var isX11 = (navigator.appVersion.indexOf("x11") != -1); var isNS4 = (document.layers) ? 1 : 0; var isNS6 = VarUsrAgt.indexOf("netscape6") != -1; var isNS7 = VarUsrAgt.indexOf("netscape/7.") != -1; var isIE = VarUsrAgt.indexOf("msie") != -1; var isOP = VarUsrAgt.indexOf("opera") != -1 var isMZ1 = navigator.appName.indexOf("Netscape") != -1 && navigator.appVersion.charAt(0) == 5; var isFF = VarUsrAgt.indexOf("firefox") != -1; var isSF = VarUsrAgt.indexOf("safari") != -1; var type = "UK"; //初期値はunknown if (navigator.userAgent.match("Chrome")) { type = "CH"; } else if (isIE) { type = "IE"; } else if (isFF) { type = "FF"; } else if (isOP) { type = "OP"; } else if (isNS4 || isNS6 || isNS7) { type = "NN"; } else if (isSF) { type = "SF"; } else { type = "UK"; } return type; } }