- ベストアンサー
オンマウスでテキストを表示するためには
『http://tv.starcat.co.jp/channel/lineup/』のようにテキストの上にマウスを置いた時に飛び出すようにテキストを表示させたいと思っています。 今までは<font title="○○">のタグで代用していましたが、これだと表示された後、数秒で消えてしまうのでやはり不便に感じました。 上のサイトではテキスト上でマウスを移動させると、飛び出したテキストも一緒に動いてしまいますが、できることならこの飛び出すテキストを飛び出した位置で固定状態にし、テキスト、もしくは飛び出したテキストの上にマウスが乗っている間は飛び出すテキストが消えない状態したいと思います。 更にできることなら、その飛び出したテキストの中にリンクや画像（サムネイルサイズ）を付けられたら良いなと考えているんですが、これら全てを含めることは可能でしょうか？ 不可能であるなら、上のサイトのようにテキストを表示させる方法だけでも構いません。 このような方法を知っている方いらっしゃいましたらご教示をお願いします。
- hirono_22
- お礼率52% (13/25)
- JavaScript
- 回答数13
- ありがとう数14
- みんなの回答 （13）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
疲れた～。今日はここまで！ とりあえず、開いた要素にマウスが乗っかってる状態のときは消さないようにしました。 要素はdisplayでなくvisibiltyをいじっているので、インライン要素にも適用可能。 window.onload後にToolTipを起動したら、対象の要素を消してます トリガーにしかけるのと、数秒後に起動は、のちほど！ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>Tool tip</title> <style type="text/css"> .popup-triger { color:blue; } .txt-red { color:red; } .waku1 { background-color:#fee; border:3px red double; } .txt-blue { color:blue; } .waku2 { background-color:#eef; border:3px blue double; } </style> <p>ここにマウスを乗せると<span class="popup-triger">説明が表示</span>されます</p> <div class="popup-view txt-red waku1">1ここに説明やらリンクやら・・</div> <p>あ～あ～あ～<span class="popup-triger">いい</span>ううううう</p> <span class="popup-view txt-blue waku2">2ここに説明やらリンクやら・・</span> <script type="text/javascript"> //全角空白は半角空白かタブに変換のこと //@cc_on /*@if (1) attachEvent('on' + @else@*/ addEventListener(/*@end@*/ 'load', function () { //指定したCSSが親にあるか？ function getParentByClassName (e, css_reg) { do if (('' + e.className).match(css_reg)) return e; while (e = e.parentNode); return null; } //指定したCSSの次のノード function getNextByClassName (obj, css_reg) { while (obj = getNextNode(obj)) if (('' + obj.className).match(css_reg)) return obj; return null; } //次のノード function getNextNode (node) { var n; if (n = node.firstChild) return n; do if (n = node.nextSibling) return n; while (node = node.parentNode); return null; } //----- function ToolTip () { this.init.apply(this, arguments); } ToolTip.prototype.init = function (triger_css, target_css, time) {//初期化 var count = 0; var o, s, objs = document.getElementsByTagName('*'); this.memory = null;//表示したTipを保存 this.overflag = 0; this.triger_reg = new RegExp('\\b' + triger_css + '\\b');//検索用 this.target_reg = new RegExp('\\b' + target_css + '\\b');//検索用 this.timer = time; this.cnt = 0; while (o = objs[count++]) { //対象のものだけ非表示に if (('' + o.className).match(this.target_reg)) { s = o.style; s.visibility = 'hidden'; s.position = 'absolute'; s./*@if (1) filter = 'Alpha(opacity=0)' @else@*/ opacity = 0 /*@end@*/; } } document./*@if(1)attachEvent('on'+ @else @*/addEventListener(/*@end@*/'mouseover', (function (cb_) { return function (evt) { cb_.check(evt); }; })(this), false);//イベント追加 }; ToolTip.prototype.check = function (evt) {//mouseoverされるたび処理 var x0, x1, n, o, element = evt./*@if (1) srcElement @else@*/ target/*@end@*/; if ((''+element.className).match(this.triger_reg)) { //トリガー？ if (n = getNextByClassName(element, this.target_reg)) { if (this.memory == n) return; this.hide(); x0 = /*@if (1) evt.x + document.body.scrollLeft @else@*/ evt.pageX/*@end@*/ + 1; x1 = document /*@if (1) [document.compatMode == 'CSS1Compat' ? 'documentElement' : 'body'].clientWidth /*@else@*/ .defaultView.innerWidth /*@end@*/ - n.offsetWidth; n.style.top = /*@if (1) evt.y + document.body.scrollTop @else@*/ evt.pageY/*@end@*/ + 1 + 'px'; n.style.left = (x1 < x0 ? x1: x0) + 'px'; this.disp(n); } else { alert('対象となる要素がありません'); return; //error!! } } else { o = getParentByClassName(element, this.target_reg); if (this.overflag ==0 && this.memory && this.memory == o) { this.overflag = 1; } else if (this.overflag == 1 && this.memory && o == null) { this.hide(); } } }; ToolTip.prototype.disp = function (element) { this.cnt = (this.cnt+1) % 256; new Opacity(element, 0, 5, Math.floor(this.timer / 20)); setTimeout( (function(cb_, n) { return function () { cb_.later(element, n); }; })(this, this.cnt), 3000); this.memory = element; this.overflag = 0; }; ToolTip.prototype.hide = function () { if (this.memory) { new Opacity(this.memory,100, -5, Math.floor(this.timer / 20)); this.memory = null; this.overflag = 0; } }; ToolTip.prototype.later = function (element, cnt) { if (element == this.memory && this.overflag == 0 && this.cnt == cnt) this.hide(); } //________________________________________________ function Starter (callbackfn) { this.timerID = (function (o) { return setInterval(function () { return callbackfn.call(o); }, o.interval); })(this); } function Stopper () { clearInterval(this.timerID); } function Timer () { this.timerID = null; this.interval = this.time;} Timer.prototype.start = function (listener) { return Starter.call(this, listener); }; Timer.prototype.stop = function () { return Stopper.call(this); }; //_____ function Decorator (alpha) { //@ this.filter = 'Alpha(opacity=' + alpha + ')'; this.opacity = alpha / 100 + ''; } //_____ function Opacity () { this.init.apply(this, arguments); Timer.call(this); this.start(this.changer); } Opacity.prototype = new Timer(); Opacity.prototype.constructor = Opacity; Opacity['#instances'] = []; Opacity.prototype.init = function (element, opacity, step, time) { var c = 0, f = false, o; this.element = element; this.step = step; this.time = time; this.opacity = opacity; while (o = Opacity['#instances'][c++]) { //同じ要素なら上書き if (o == element) { f = true; Opacity['#instances'][c].end(); Opacity['#instances'][c] = this; } } if(!f) Opacity['#instances'].push(element, this); //要素リストに追加 }; Opacity.prototype.setOpacity = function (n) { var f0 = (n < 0); var f1 = (n > 100); if (f0) this.element.style.visibility = 'hidden'; this.opacity = n = f0 ? 0: (f1 ? 100: n); Decorator.call(this.element.style, n) if (f0 || f1) this.stop(); return true; }; Opacity.prototype.changer = (function () { return function () { this.setOpacity(this.opacity); this.opacity += this.step; if (this.opacity >0 ) this.element.style.visibility = 'visible'; }; })(); Opacity.prototype.end = (function () { return function () { this.setOpacity((this.step>0 ? 101: -1)); }; })(); //________________________________________________ new ToolTip('popup-triger', 'popup-view', 700); }, false); </script>
その他の回答 (12)
閉じていいですよ！ なんかオブジェクト指向ってのが良く理解できてなくて・・・ 例えば var a = new ToolTip('Triger', 'Target', 1000, 1000); の他に var b = new ToolTip('Triger2', 'Target2', 300, 300); var c = new ToolTip('Triger3', 'Target3, 200, 200); と定義しておくと、複数の箇所で、違うタイミングで表示できます。 なので、この場合 a b c がバッティングしないようにというか そんなのを考えていたら、どんどん複雑になってきて、今の 自分の頭では、無理っぽかったのは事実。 もうちょっと精進します。
年度末は忙しい！ IEだといきなり現れる！？ とりあえず。放り投げる！^^; <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>Tool tip</title> <style type="text/css"> .ctype1 { border:3px #f00 double; background-color:#fee; } .ctype2 { border:1px #0ff double; background-color:#eef; } </style> <p><span class="Triger ctype1" id="t0">ここは地雷</span></p> <div class="Target ctype2" id="d0"> 説明１：これが表示されます </div> <p><span class="Triger ctype1" id="t1">ここは地雷２</span></p> <div class="Target ctype2" id="d1"> 説明２：これが表示されます </div> <script type="text/javascript"> //全角空白は半角空白かタブに変換のこと //@cc_on /*@if (1) attachEvent('on' + @else@*/ addEventListener(/*@end@*/ 'load', function () { //指定したCSSが親にあるか？ function getParentByClassName (e, css_reg) { do if (('' + e.className).match(css_reg)) return e; while (e = e.parentNode); return null; } //指定したCSSの次のノード function getNextByClassName (obj, css_reg) { while (obj = getNextNode(obj)) if (('' + obj.className).match(css_reg)) return obj; return null; } //次のノード function getNextNode (node) { var n; if (n = node.firstChild) return n; do if (n = node.nextSibling) return n; while (node = node.parentNode); return null; } //----- function OpacityManager () { this.init.call(this, arguments); } OpacityManager.prototype.init = function () { this.elementBuffer = []; this.opacity = []; this.updown = []; this.step = 2; this.time = 20; }; OpacityManager.prototype.disp = function (element, x, y) { var n = this.num(element); var f = (this.updown[n] == 0); var s = element.style; if (undefined != y) s.top = y + 'px'; if (undefined != x) s.left = x + 'px'; this.updown[n] = 1; if (f) this.changer(n); //二重起動防止のため updown==0 を判別。 }; OpacityManager.prototype.hide = function (element) { var n = this.num(element); var f = (this.updown[n] == 0); this.updown[n] = -1; if (f) this.changer(n); }; OpacityManager.prototype.changer = function (n) { var flag = false; var style = this.elementBuffer[n].style; var alpha = this.opacity[n] + this.step * this.updown[n]; if ( 100 < alpha) { alpha = 100; flag = true; this.updown[n] = 0; } if ( 0 > alpha) { alpha = 0; flag = true; this.updown[n] = 0; } Opacity.call(style, alpha); this.opacity[n] = alpha; if (!flag) { setTimeout((function (cb_, n) { return function() {cb_.changer(n)}; })(this, n), this.time); } } OpacityManager.prototype.getStatus = function (element) { return this.updown[this.num(element)]; }; OpacityManager.prototype.num = function (element) { var count = 0; var o; var s = element.style; while (o = this.elementBuffer[count]) { if (o == element) return count; count++; } this.elementBuffer.push(element); this.opacity.push(0); this.updown.push(0); Opacity.call(s, 0); return count; }; function Opacity (alpha) { var f = (alpha > 0); //@ this.filter = 'Alpha(opacity=' + alpha + ')'; this.opacity = alpha / 100 + ''; this.visibility = f ? 'visible': 'hidden'; this.zIndex = f ? 1: 0; } var om = new OpacityManager; function ToolTip () { this.init.apply(this, arguments); } ToolTip.prototype.init = (function (changer) { return function(triger_css, target_css, delay_time0, delay_time1) { var count = 0; var o, objs; this.time0 = delay_time0; this.time1 = delay_time1; this.triger_m = null; this.target_m = null; this.triger_reg = new RegExp('\\b' + triger_css + '\\b');//検索用 this.target_reg = new RegExp('\\b' + target_css + '\\b');//検索用 this.loop_cnt = 0; //初期化 targetを消す objs = document.getElementsByTagName('*'); while (o = objs[count++]) { if (o.className && o.className.match(this.target_reg)) { changer.num(o); o.style.position = 'absolute'; } } //mouseover イベント追加 document./*@if(1)attachEvent('on'+ @else @*/addEventListener(/*@end@*/'mouseover', (function (cb_) { return function (evt) { cb_.mouseCheck(evt); }; })(this), false); return true; }; })(om); ToolTip.prototype.mouseCheck = (function (changer) { return function (evt) { var x0, x1, x, y; var target; var status; var element = evt./*@if (1) srcElement @else@*/ target/*@end@*/; var triger = getParentByClassName(element, this.triger_reg);//マウスが移動しても親は同じ可能性がある target = getParentByClassName(element, this.target_reg); // targetを得る if (target && changer.getStatus(target)!=0) {this.disp(target,this.loop_cnt);return} if (triger == this.triger_m) return; this.loop_cnt = (this.loop_cnt + 1) % 256; //一度外れて戻ってきた場合を判断 if (this.triger_m) { setTimeout( (function(cb_, element) { //n秒後に呼び出す return function () { cb_.hide(element); }; })(this,this.target_m), this.time0); this.triger_m = null; this.target_m = null; } if (!triger) return; target = getNextByClassName(triger, this.target_reg); // targetを得る if (!target) { alert('Error! 対応するタグが見つかりません'); return; } if (target) { x0 = /*@if (1) evt.x + document.body.scrollLeft @else@*/ evt.pageX/*@end@*/ + 1; x1 = document /*@if (1) [document.compatMode == 'CSS1Compat' ? 'documentElement' : 'body'].clientWidth /*@else@*/ .defaultView.innerWidth /*@end@*/ - target.offsetWidth; y = /*@if (1) evt.y + document.body.scrollTop @else@*/ evt.pageY/*@end@*/ + 1; x = (x1 < x0 ? x1: x0); setTimeout( (function(cb_, cnt) { //n秒後に呼び出す return function () { cb_.disp(target, cnt, x, y); }; })(this, this.loop_cnt), this.time0); this.triger_m = triger; this.target_m = target; } }; })(om); ToolTip.prototype.disp = (function (changer) { return function (element, cnt, x, y) { if (this.loop_cnt == cnt) changer.disp(element, x, y); }; })(om); ToolTip.prototype.hide = (function (changer) { return function (element) { changer.hide(element); }; })(om); var a = new ToolTip('Triger', 'Target', 1000, 1000); }, false); </script>
補足
NO.8のものは、自分で解決することができました。 こんなにも考えていただきありがとうございます。 しかし、う～ん、やっぱりちょっと使い難いですね。 テキストに乗っている間は消えなくなっているんですが、今度は一度飛び出したウィンドに乗せてしまうと、ウィンドの方が消えなくなっています。 数秒後に呼び出すものも、閲覧者からするとちょっと時間がかかり過ぎていて、ウィンドが出るかどうか判断できない状態で次に行ってしまいそうです。 個人的にこうあると良いだろうと思っている要点をまとめると ・テキストにマウスが乗っている間はウィンドが消えない。テキストから離すと消える。 ・ウィンドにマウスが乗っている間もウィンドが消えない。ウィンドから離すと消える。 ・ウィンドの出現には、テキストにマウスを乗せて0.5秒～1秒ほどの間があるくらいがベスト。 ・他のテキストに乗せると、その前に出現していたウィンドが消えて、新しい方のウィンドが開く。 こんなところでしょうか。 個人的にはNO.8が一番使い易いかなと思います。 ご自分でも利用したいと仰ってましたが、私の意見としてはNO.8が最も利便性が高いのではないかと思います。 お忙しい中、ここまでお付き合いくださりありがとうございます(^^) 私の悩みの方は、NO.8でほとんど解決しました。 よろしければこの質問を閉じたいと思いますが、よろしいでしょうか？
簡単な質問には答える時間があるのだけれど これは俺の頭だと時間がかかりそう;_; じっくり落ち着いて考えられるときにやりますね！ こんな風に書いてくれる人が沢山いてくれれば 勉強になるのだけれど・・・ これも、とあるHPで教えていただいたものを 熟読しながら1(?)見よう見まねで書いているけど、 いまだに消化できていないのかも？ う～～ん、悩む^^; 神様みたいな人がいるんだよね～^^; ところでcssの名前が間違ってない？
補足
CSSの名前が間違ってるとは？ NO.8で書いていただいたものを、そのままコピペして動作確認してみたので、知識の無い自分にはどこが間違ってるのかわからないんですが…。 しかし見よう見真似でこれをやってるとは……凄いですね。
No.9 たしかに・・・^^; でも必ずしも、表示させたい場所に出てくるわけではないね ３番目のものだと、文頭のとき、左過ぎで見えなかったり・・。 じんわりと消えたり、出たりするのが、俺は好み^^;
補足
良い感じです。 しかし…NO.8の方法だと、今度はなぜかウィンドの枠が表示されず、透明になってしまっています…。 あと、出来ればマウスを乗せる対象であるテキスト（トリガーの方）に、マウスが乗っている間もウィンドに消えてほしくはないと思ってました。 が、これは秒数を調整すれば問題無さそうなので、出来なければ結構です。 こんなにまでやっていただきありがとうございます(^^)
- N_A_O
- ベストアンサー率66% (37/56)
これだとCSSで良いんじゃない。 <style> a.screen1,a.screen2,a.screen3, a.screen1:visited,a.screen2:visited,a.screen3:visited {color:#c00; position:relative; z-index:1;} a.screen1 b {position:absolute;visibility:hidden; width:200px; height:0;border:1px solid #ff0; left:0; top:15px; } a.screen2 b {position:absolute;visibility:hidden; width:200px; height:0;border:1px solid #f0f; left:-200px; top:0px; } a.screen3 b {position:absolute;visibility:hidden; width:200px; height:0;border:1px solid #0ff; left:-200px;top:0px; } a.screen1:hover ,a.screen2:hover ,a.screen3:hover {text-decoration:none; z-index:1000; border:0;} a.screen1:hover b {visibility:visible;height:110px;cursor:pointer;z-index:500; background:#ff0;border:0;} a.screen2:hover b {visibility:visible;height:130px;cursor:pointer;z-index:500; background:#f0f;border:0;} a.screen3:hover b {visibility:visible;height:150px;cursor:pointer;z-index:500; background:#0ff;border:0;} a.screen1:hover b img,a.screen2:hover b img,a.screen3:hover b img {border:0;} </style> <a class="screen1" href="http://www.goo.ne.jp/">London <b><img src="../jpg/5.jpg;w=200&h=500" alt="website image" title="website image" />And boasts four World Heritage Sites.</b></a> has the greatest concentration of major attractions in Britain<br> Some of the most popular places of interest with visitors are<a class="screen2" href="http://www.yahoo.com/"> Nottingham Castle Museum and Art Gallery,<b> the historic Lace Market area and the Caves.<img src="../jpg/6.jpg;w=200&h=500" alt="website image" title="website image" /></b></a><br> Swansea, Wales' City by the Sea and birthplace of <a class="screen3" href="#nogo">Dylan Thomas and Catherine Zeta Jones,<b><img src="../jpg/7.jpg;w=200&h=500" alt="website image" title="website image" /> is a lively and vibrant maritime city and regional shopping centre.</b></a></p>
ごめんね～！ 今必死こいて、オブジェクト指向的考え方で書いてます。 もちろん自分の勉強のためにね^^; できるなら、しばらく閉じないでおくれ～！
ごめん！連続で・・ まだ手直しが必要。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>Tool tip</title> <style type="text/css"> .popup-triger { color:blue; } .txt-red { color:red; } .waku1 { background-color:#fee; border:3px red double; } .txt-blue { color:blue; } .waku2 { background-color:#eef; border:3px blue double; } </style> <p>ここにマウスを乗せると<span class="popup-triger">説明が表示</span>されます</p> <div class="popup-view txt-red waku1">1ここに説明やらリンクやら・・</div> <p>あ～あ～あ～<span class="popup-triger">いい</span>ううううう</p> <span class="popup-view txt-blue waku2">2ここに説明やらリンクやら・・</span> <script type="text/javascript"> //@cc_on //___________________________________________________________ /*@if (1) attachEvent('on' + @else@*/ addEventListener(/*@end@*/ 'load', function () { //指定したCSSが親にあるか？ function getParentByClassName (obj, css_reg) { do if (obj.className && obj.className.match(css_reg)) return obj; while(obj = obj.parentNode) return null; } //指定したCSSの次のノード function getNextByClassName (obj, css_reg) { while (obj = getNextNode(obj)) if (obj.className && obj.className.match(css_reg)) return obj; return null; } //次のノード function getNextNode (node) { var n; if (n = node.firstChild) return n; do if (n = node.nextSibling) return n; while (node = node.parentNode); return null; } //___________________________________________________________ function ToolTip () { this.init.apply(this, arguments);//初期化 } ToolTip.prototype.init = function (triger_css, fellow_css, time) { this.memory = null; this.overflag = false; this.triger = new RegExp('\\b' + triger_css + '\\b'); this.fellow = new RegExp('\\b' + fellow_css + '\\b'); this.timer = time; var o, objs = document.getElementsByTagName('*');//対象のものだけ非表示に var count = 0; while (o = objs[count++]) { if (o.className && o.className.match(this.fellow)) { with (o.style) { visibility = 'hidden'; position = 'absolute'; filter = 'Alpha(opacity=0)'; opacity = 0; } } } document./*@if(1)attachEvent('on'+ @else @*/addEventListener(/*@end@*/'mouseover', (function (cb_) { return function (evt) { cb_.check(evt); }; })(this), false); }; ToolTip.prototype.check = function (evt) { var element = evt./*@if (1) srcElement @else@*/ target/*@end@*/; var x0, x1, m, o; if (getParentByClassName(element, this.triger)) { this.disp(); if (n = getNextByClassName(element, this.fellow)) { x0 = /*@if (1) evt.x + document.body.scrollLeft @else@*/ evt.pageX/*@end@*/ + 1; x1 = document.body.offsetWidth - n.offsetWidth; //ここは安易すぎ？ n.style.top = /*@if (1) evt.y + document.body.scrollTop @else@*/ evt.pageY/*@end@*/ + 1 + 'px'; n.style.left = (x1 < x0 ? x1: x0) + 'px'; this.memory = n; this.disp(true); } } else { o = getParentByClassName(element, this.fellow); if (this.memory) if (o) this.overflag = true; else if (this.overflag) this.disp(); //表示したTipを消すか？ } }; ToolTip.prototype.disp = function (flag) { if (!this.memory) return; this.overflag = false; if (flag) { new Opacity(this.memory, 0, 5, Math.floor(this.timer / 20)); setTimeout( (function(cb_) { return function () { cb_.disp(); }; })(this), 5000); } else { new Opacity(this.memory,100, -5, Math.floor(this.timer / 20)); } if (!flag) this.memory = null; }; //________________________________________________ function Starter (callbackfn) { this.timerID = (function (o) { return setInterval(function () { return callbackfn.call(o); }, o.interval); })(this); } function Stopper () { clearInterval(this.timerID); } function Timer () { this.timerID = null; this.interval = this.time;} Timer.prototype.start = function (listener) { return Starter.call(this, listener); }; Timer.prototype.stop = function () { return Stopper.call(this); }; //________________________________________________ function Decorator (alpha) { //@ this.filter = 'Alpha(opacity=' + alpha + ')'; this.opacity = alpha / 100 + ''; } //________________________________________________ function Opacity () { this.init.apply(this, arguments); Timer.call(this); this.start(this.changer); } Opacity.prototype = new Timer(); Opacity.prototype.constructor = Opacity; Opacity.prototype.init = function (element, opacity, step, time) { var x = Opacity['#instances']; var c = 0; var o; var f = false; this.element = element; this.step = step; this.time = time; this.opacity = null; this.setOpacity(opacity); while (o = x[c++]) { if (o == element) { f = true; x[c].end(); Opacity['#instances'][c] = this; } } if(!f) Opacity['#instances'].push(element, this); }; Opacity.prototype.setOpacity = function (n) { var f0 = (n < 0); var f1 = (n > 100); if (f0) this.element.style.visibility = 'hidden'; this.opacity = n = f0 ? 0: (f1 ? 100: n); Decorator.call(this.element.style, n) return f0 || f1; }; Opacity.prototype.changer = function () { this.opacity += this.step; if (this.opacity >0 ) this.element.style.visibility = 'visible'; if(this.setOpacity(this.opacity)) this.stop(); } Opacity.prototype.end = function () { this.stop(); this.setOpacity((this.step>0 ? 100: 0)); } Opacity['#instances'] = []; //________________________________________________ new ToolTip('popup-triger', 'popup-view', 500); }, false); </script>
補足
お…惜しい…惜し過ぎる。 良い感じではあるんですが…。 テキストと飛び出したウィンドにマウスを乗せている間は、ウィンドに消えてほしくないんですよ。3秒後に消えるだけだと<font title>のタグと変わらない性能になってしまうので。 自分の考えとしては、No.3で回答していただいたものが理想に一番近い感じです。あとはこれに上のような感じのものが組み合わされば…。 なるほど、cssの複数指定については、自分の無い頭でもある程度理解できました。 わざわざ説明ありがとうございます(^^) widthのフリーサイズというのは、サイズを指定せずに端まで行ったら折り返すことはできないのかなと。確かに<br>でも良いんですが、指定しないことは可能なのかなと思いまして。 これは大した問題でもないので出来ないなら出来なくても結構です。 あと、前の捕捉で書き忘れてしまったんですが、乗せた後、ウィンド出現までわずかばかりの時間（0.5～1秒くらい）があると更に便利かなと思います。 無理言ってすみません。
これは自分の勉強のためにです。 エフェクトが効いていません。 ノードの関数を中に含めるべきなのだろうか？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>Tool tip</title> <style type="text/css"> .popup-triger { color:blue; } .txt-red { color:red; } .waku1 { background-color:#fee; border:3px red double; } .txt-blue { color:blue; } .waku2 { background-color:#eef; border:3px blue double; } </style> <p>ここにマウスを乗せると<span class="popup-triger">説明が表示</span>されます</p> <div class="popup-view txt-red waku1">1ここに説明やらリンクやら・・</div> <p>あ～あ～あ～<span class="popup-triger">いい</span>ううううう</p> <div class="popup-view txt-blue waku2">2ここに説明やらリンクやら・・</div> <p>あ～あ～あ～<span class="popup-triger">いい</span>ううううう</p> <div class="popup-view txt-red waku2">3 CSSの複数指定ってこういうこと^^;</div> <script type="text/javascript"> //@cc_on //___________________________________________________________ /*@if (1) attachEvent('on' + @else@*/ addEventListener(/*@end@*/ 'load', function () { //指定したCSSが親にあるか？ function getParentByClassName (obj, css_reg) { do if (obj.className && obj.className.match(css_reg)) return obj; while(obj = obj.parentNode) return null; } //指定したCSSの次のノード function getNextByClassName (obj, css_reg) { while (obj = getNextNode(obj)) if (obj.className && obj.className.match(css_reg)) return obj; return null; } //次のノード function getNextNode (node) { var n; if (n = node.firstChild) return n; do if (n = node.nextSibling) return n; while (node = node.parentNode); return null; } //___________________________________________________________ function ToolTip () { this.init.apply(this, arguments);//初期化 } ToolTip.prototype.init = function (triger_css, fellow_css, time) { this.memory = null; this.overflag = false; this.triger = new RegExp('\\b' + triger_css + '\\b'); this.fellow = new RegExp('\\b' + fellow_css + '\\b'); this.timer = time; var o, objs = document.getElementsByTagName('*');//対象のものだけ非表示に var count = 0; while (o = objs[count++]) { if (o.className && o.className.match(this.fellow)) { with (o.style) { display = 'none'; position = 'absolute'; // filter = 'Alpha(opacity=0)'; // opacity = 0; } } } document./*@if(1)attachEvent('on'+ @else @*/addEventListener(/*@end@*/'mouseover', (function (cb_) { return function (evt) { cb_.check(evt); }; })(this), false); }; ToolTip.prototype.check = function (evt) { var element = evt./*@if (1) srcElement @else@*/ target/*@end@*/; var x0, x1, m, o; if (getParentByClassName(element, this.triger)) { this.disp(); if (n = getNextByClassName(element, this.fellow)) { x0 = /*@if (1) evt.x + document.body.scrollLeft @else@*/ evt.pageX/*@end@*/ + 1; x1 = document.body.offsetWidth - n.offsetWidth; //ここは安易すぎ？ n.style.top = /*@if (1) evt.y + document.body.scrollTop @else@*/ evt.pageY/*@end@*/ + 1 + 'px'; n.style.left = (x1 < x0 ? x1: x0) + 'px'; this.memory = n; this.disp(true); } } else { o = getParentByClassName(element, this.fellow); if (this.memory) if (o) this.overflag = true; else if (this.overflag) this.disp(); //表示したTipを消すか？ } }; ToolTip.prototype.disp = function (flag) { if (!this.memory) return; this.overflag = false; this.memory.style.display = flag ? 'block': 'none'; if (!flag) this.memory = null; }; //________________________________________________ new ToolTip('popup-triger', 'popup-view', 1000); }, false); </script>
3秒後に、消えます！×４♪ 意外と実装が簡単だったのですぐできた！ でもグローバル変数みたいに扱っているので、 プログラム的には駄作だね^^; <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>Tool tip</title> <style type="text/css"> .popup-triger { color:blue; } .popup-view { display:none; } .txt-red { color:red; } .waku1 { background-color:#fee; border:3px red double; } .txt-blue { color:blue; } .waku2 { background-color:#eef; border:3px blue double; } </style> <p>あ～あ～あ～<span class="popup-triger">いい</span>ううううう</p> <div class="popup-view txt-red waku1">1ここに説明やらリンクやら・・</div> <p>あ～あ～あ～<span class="popup-triger">いい</span>ううううう</p> <div class="popup-view txt-blue waku2">2ここに説明やらリンクやら・・</div> <p>あ～あ～あ～<span class="popup-triger">いい</span>ううううう</p> <div class="popup-view txt-red waku2">3 CSSの複数指定ってこういうこと^^;</div> <script type="text/javascript"> //@cc_on (function () { var m = null; var f = false; var timer = 3000; // = 3秒 var timerId = null; document./*@if(1)attachEvent('on'+ @else @*/addEventListener(/*@end@*/'mouseover', function (evt) { var element = evt./*@if(1)srcElement @else@*/ target /*@end@*/; var nextEmt; var pclsnam = getParentByClassName(element, 'popup-view', true); if (element.className.match(/\bpopup-triger\b/)) { if (m) { if (timerId) timerId = (clearTimeout(timerId), null); m.style.display = 'none'; f = false; m = null; } if(nextEmt = getNextByClassName(element, 'popup-view')){ timerId = setTimeout( (function(e){ return function(){ if(e.style.display == 'block') { setOpacity(m,100,-5,30); f = false; m = null; } };})(nextEmt),timer); setOpacity(nextEmt,0,5,30); nextEmt.style.display = 'block'; nextEmt.style.position = 'absolute'; nextEmt.style.top = /*@if(1) evt.y + document.body.scrollTop @else@*/ evt.pageY /*@end@*/ + 1+ 'px'; nextEmt.style.left = /*@if(1) evt.x + document.body.scrollLeft @else@*/ evt.pageX /*@end@*/ + 1+ 'px'; m = nextEmt; } } if (m && f && pclsnam == null) { if (timerId) timerId = (clearTimeout(timerId), null); setOpacity(m,100,-5,30); f = false; m = null; } if (m && pclsnam) f = true; }, false); function getParentByClassName (obj, css, flag) { var p = flag ? obj: obj.parentNode; var r = new RegExp('\\b' + css +'\\b'); do if (p.className && p.className.match(r)) return p; while(p = p.parentNode) return null; } function getNextByClassName (obj, css) { var t; var r = new RegExp('\\b' + css +'\\b'); while (obj = getNextNode(obj)) if (obj.className && obj.className.match(r)) return obj; return null; } function getNextNode (node) { var n; if (n = node.firstChild) return n; do if (n = node.nextSibling) return n; while (node = node.parentNode); return null; } function setOpacity(e,o,s,w){ function g(){ if(o<0)o=0,f=2;if(o>100)o=100,f=1; t./*@if(1)filter='alpha(opacity='+o+')'@else@*/opacity=o/100/*@end@*/; if(!f) o+=s,setTimeout((function(){return function(){g()}})(this),w);} if(f==2)t.display='none'; var f,t=e.style;g(); } })(); </script>
数秒後に消えるものは、とりあえず未実装。 widthのフリーサイズとは？意味不明。 widthの指定を外し、適当なところで<br>でもすれば良いのでは？ 出現と隠滅にはエフェクトを使いました！まぁ～見た目の問題だね^^; スタイルシートの部分を変えたのそこを参照してわからないのであれば 再度質問を！ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>Popup</title> <style type="text/css"> .popup-triger { color:blue; font:normal 20pt/20pt '@ＭＳ 明朝';} .popup-view { display:none; } .abc { color:red; } .def { background-color:#fee; border:3px red double; } .ghi { color:blue; } .jkl { background-color:#eef; border:3px blue double; } </style> <p>あ～あ～あ～<span class="popup-triger">いい</span>ううううう</p> <div class="popup-view abc jkl">1ここに説明やらリンクやら・・</div> <p>あ～あ～あ～<span class="popup-triger">いい</span>ううううう</p> <div class="popup-view ghi jkl">2ここに説明やらリンクやら・・</div> <p>あ～あ～あ～<span class="popup-triger">いい</span>ううううう</p> <div class="popup-view abc def">3 CSSの複数指定ってこういうこと^^;</div> <script type="text/javascript"> //@cc_on (function () { var m = null; var f = false; //setOpacity('p' document./*@if(1)attachEvent('on'+ @else @*/addEventListener(/*@end@*/'mouseover', function (evt) { var element = evt./*@if(1)srcElement @else@*/ target /*@end@*/; var nextEmt; var pclsnam = getParentByClassName(element, 'popup-view', true); var timer = 3000; // = 3秒 var timerId = null; if (element.className.match(/\bpopup-triger\b/)) { if (m) { m.style.display = 'none'; f = false; m = null; } if(nextEmt = getNextByClassName(element, 'popup-view')){ setOpacity(nextEmt,0,5,30); nextEmt.style.display = 'block'; nextEmt.style.position = 'absolute'; nextEmt.style.top = /*@if(1) evt.y + document.body.scrollTop @else@*/ evt.pageY /*@end@*/ + 1+ 'px'; nextEmt.style.left = /*@if(1) evt.x + document.body.scrollLeft @else@*/ evt.pageX /*@end@*/ + 1+ 'px'; m = nextEmt; } } if (m && f && pclsnam == null) { setOpacity(m,100,-5,30); f = false; m = null; } if (m && pclsnam) f = true; }, false); function getParentByClassName (obj, css, flag) { var p = flag ? obj: obj.parentNode; var r = new RegExp('\\b' + css +'\\b'); do if (p.className && p.className.match(r)) return p; while(p = p.parentNode) return null; } function getNextByClassName (obj, css) { var t; var r = new RegExp('\\b' + css +'\\b'); while (obj = getNextNode(obj)) if (obj.className && obj.className.match(r)) return obj; return null; } function getNextNode (node) { var n; if (n = node.firstChild) return n; do if (n = node.nextSibling) return n; while (node = node.parentNode); return null; } function setOpacity(e,o,s,w){ function g(){ if(o<0)o=0,f=2;if(o>100)o=100,f=1; t./*@if(1)filter='alpha(opacity='+o+')'@else@*/opacity=o/100/*@end@*/; if(!f) o+=s,setTimeout((function(){return function(){g()}})(this),w);} if(f==2)t.display='none'; var f,t=e.style;g(); } })(); </script>
- 1
- 2
お礼
では、質問を締め切らせていただきます。 ここまで長い間お付き合いくださり、本当にありがとうございました！(^^) 言葉でお礼し尽くすことができませんが、凄く助かりました。 ありがたく使わせていただきます。