• ベストアンサー

オンマウスでテキストを表示するためには

『http://tv.starcat.co.jp/channel/lineup/』のようにテキストの上にマウスを置いた時に飛び出すようにテキストを表示させたいと思っています。 今までは<font title="○○">のタグで代用していましたが、これだと表示された後、数秒で消えてしまうのでやはり不便に感じました。 上のサイトではテキスト上でマウスを移動させると、飛び出したテキストも一緒に動いてしまいますが、できることならこの飛び出すテキストを飛び出した位置で固定状態にし、テキスト、もしくは飛び出したテキストの上にマウスが乗っている間は飛び出すテキストが消えない状態したいと思います。 更にできることなら、その飛び出したテキストの中にリンクや画像（サムネイルサイズ）を付けられたら良いなと考えているんですが、これら全てを含めることは可能でしょうか？ 不可能であるなら、上のサイトのようにテキストを表示させる方法だけでも構いません。 このような方法を知っている方いらっしゃいましたらご教示をお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
noname#84373
noname#84373
回答No.8

疲れた～。今日はここまで！ とりあえず、開いた要素にマウスが乗っかってる状態のときは消さないようにしました。 要素は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)

回答No.2

ツールチップと呼ばれるものですね。 >1さんが自作されていますが、今は色々とスクリプトが出ているので、 好みのものを探すのも楽しいと思いますよ。 http://www.google.co.jp/search?hl=ja&rlz=1B3GGGL_jaJP279JP279&q=%E3%83%84%E3%83%BC%E3%83%AB%E3%83%81%E3%83%83%E3%83%97%E3%80%80%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%97%E3%83%88&btnG=%E6%A4%9C%E7%B4%A2&lr= 参考に挙げられていたサイトはこちらのを使っているようです http://www.dyn-web.com/code/tooltips/

hirono_22
質問者

お礼

回答ありがとうございます。 これってツールチップって言うんですね。 参考URLの方見てみましたが、英語で何書いてあるのかわかりませんでした（苦笑） ただ、ダウンロードしてみたところ、便利な機能があるので今後使わせてもらうかもしれません。 紹介していただきありがとうございます。 ツールチップという名前だとわかったのは大きな収穫でした。 今後は自分なりにも探してみようかと思います。 ありがとうございました。

全文を見る
すると、全ての回答が全文表示されます。
noname#84373
noname#84373
回答No.1

簡単そうだから手をつけてみたが、意外と時間がかかってしまった;_; 使い方、mouoseover したいタグに class="popup-triger" をつける。 表示したいブロック要素に class="popup-view"をつける。 ただしtrigerより前にviewがあってはならない。（後方検索なので。） cssのclassは複数あっても可！(class="popup-triger abc def") なので、view側のpopup-viewは、display:noneだけにして 枠の飾りは他のクラスで行うと良いかもしれない 自分でも利用したいので、間違いがあれば、他の方に指導して頂ければ 助かります。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>Popup</title> <style type="text/css"> .popup-triger { color:blue; } .popup-view { display:none; width:100px; border:3px red double; background-color:#fee;} </style> <p>あ～あ～あ～<span class="popup-triger">いい</span>ううううう</p> <div class="popup-view">1ここに説明やらリンクやら・・</div> <p>あ～あ～あ～<span class="popup-triger">いい</span>ううううう</p> <div class="popup-view">2ここに説明やらリンクやら・・</div> <p>あ～あ～あ～<span class="popup-triger">いい</span>ううううう</p> <div class="popup-view">3ここに説明やらリンクやら・・</div> <script type="text/javascript"> //@cc_on (function () { var m = null; var f = false; 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 (m && pclsnam) f = true; if (m && f && pclsnam == null) { m.style.display = 'none'; f = false; m = null; } if (!m && element.className.match(/\bpopup-triger\b/)) { if(nextEmt = getNextByClassName(element, 'popup-view')){ nextEmt.style.display = 'block'; nextEmt.style.position = 'absolute'; nextEmt.style.top = /*@if(1) evt.y + document.body.scrollTop @else@*/ evt.pageY /*@end@*/ + 'px'; nextEmt.style.left = /*@if(1) evt.x + document.body.scrollLeft @else@*/ evt.pageX /*@end@*/ + 'px'; m = nextEmt; } } }, 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; } })(); </script>

hirono_22
質問者

補足

回答ありがとうございます。 おお！ これは凄く良いですね！わざわざ作っていただきお手数お掛けしました。ありがとうございます。 ただ…少し不便な点があり、テキストの上にマウスを乗せるとウィンドが飛び出すのは良いんですが、この後が少々問題です。 一度飛び出したウィンドにマウスを乗せないとウィンドが消えないようになっているようです。 これによって、1つ目のテキストの上にマウスを乗せてウィンドを出現させた後、2つ目のテキストにそのままスライドさせた時には2つ目のウィンドが出現しなくなっています。 マウスをテキスト1、テキスト2とスライドさせた時に、「前のウィンドを消して次のウィンドを出現」という風に、続け様にウィンドを出現させるということは不可能でしょうか？ 些細なことではあるんですが、これが有るのと無いのとで利便性がかなり違ってくると思うので…。 できることなら、テキストかウィンドからマウスを放した後、数秒（1～2秒程度）で消えるようなシステムならベストなんですが。 あと、widthのサイズを指定せずに、フリーサイズにすることは可能でしょうか？ サイズをpxで指定した場合、ブラウザを横に伸ばして表示されてしまいました。ブラウザの端に行った時に折り返してくれると便利だなと思いまして。 あと、 > cssのclassは複数あっても可！(class="popup-triger abc def") > なので、view側のpopup-viewは、display:noneだけにして > 枠の飾りは他のクラスで行うと良いかもしれない cssに詳しくないので、この辺りがよくわかりません。 申し訳ないですが、「class="popup-triger abc def"」や「display:none」は、どこに付けるのか教えていただけないでしょうか？ 色々とあつかましい質問ですが、よろしくお願いします。

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • <IMG SRC=" " ALT=" ">のテキストがマウスを乗せている間表示するには？

    <IMG SRC=" " ALT=" ">のタグで画像の上にマウスを合わせると、テキストが表示されるようにしています。しかし、これだと数秒後には、マウスを合わせているのに表示が消えてしまいます。これをマウスを合わせている間は、テキストが表示されるような設定にするにはどうすればよいでしょうか？どなたかご存知の方は教えてください。よろしくお願いします。

  • オンマウスでの画像＋テキスト表示

    いつも的確な回答をいただいて、非常に感謝しております。 違うカテで同じような質問をさせていただいたのですが少しやりたいことが変わったので 再度、質問いたしました。 今、HPを作成しているのですがテーブルを左右（左を大きく、右を６つくらい）に分けて 右にはいくつか写真を小さく載せてその右の写真にマウスを乗せると左に大きく表示されるようにしたいのです。 そして、その大きな写真の下にはテキストも載せたいのです （マウスを乗せた写真によって違うテキストを載せる）。 ～こんなかんじ～ │￣￣│□□□ │＿＿│□□□ テキスト ～～～～～～～～ 検索ではビルダーを使った説明しかありません。 もし、フリーのHP作成ソフト（私が使っているのはalphaEDIT）でのやり方が乗っているサイト 無ければ、ご存知の方に教えていただきたいです。 よろしくお願いいたします。

  • テキストにオンマウスでアイフレーム（？）の中に画像を表示

    初めまして。 今度、ＨＰにリンクページを作ろうと思うのですが、 リンクをはったテキストにマウスポインタを載せると、上の方のアイフレームにバナーが表示されるようにしたいのです。 色々なHTML講座サイトを調べましたが、どうしても分かりません。 よかったら、教えてください。 ttp://psyco.jp/13579/ ↑このサイトのリンクページのようなのを作りたいのです。（２ちゃんねる系ですので、嫌いな方は見ないようにお願いします）

    • ベストアンサー
    • HTML
  • 外部テキストに書いたHTMLタグがそのまま表示されてしまう。

    現在、Flash作成フリーソフト「Suzuka」で、Flashを作成中なのですが、 どうしても分からない箇所がありますので、アドバイスをよろしくお願いします。 以下のことでつまずいてます。 ダイナミックテキストに外部テキストを読み込ませることは出来るのですが、 外部テキスト内に書いているHTMLタグが、そのまま表示されてしまい、困っています。 外部テキストの内容はこんな感じです。 total=4& &txt0=<font color="#ff0000">文字の色を赤に変えたいです</font>& &txt1=あいうえお& &txt2=かきくけこ& &txt3=さしすせそ テキストのプロパティで「HTML」にチェックをいれてプレビューまたは、パブリッシュ後にブラウザで確認しても、 どうしてもタグが解釈されずに、そのまま<font color="#ff0000">文字の色を赤に変えたいです</font>で表示されてしまいます。 Suzukaのヘルプには、<font>タグがサポートされていると書いてあるのですが…。 Flashに詳しい方、アドバイスをよろしくお願いいたします。

    • ベストアンサー
    • Flash
  • テキストを極力そのまま表示し、かつ画面端で折り返したい

    テキストファイルの内容をページ上の一画に表示したいのですが、次のようなことはできないものでしょうか？ １．タブやスペースは詰めずに表示したい。 ２．行が長すぎると読みにくいので、画面端で折り返して欲しい。 条件１から、真っ先にpreタグの使用を思いついたのですが、preタグでは画面端で自動改行されません。 それではと、divタグにfont-family:monospaceを指定したのですが、自動改行はされるものの、今度はタブやスペースが詰められてしまうようです。 スタイルシートを使えばどうにかならないものかと調べてみたのですが、preタグを自動改行させたり、divタグなどでタブやスペースを詰めずに表示するためのものは見つけられませんでした。 そのようなスタイルシート、またはこれらに変わる方法をご存知でしたら、ぜひご教授ください。 よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • CSS マウスオーバーでテキストの上に画像を表示させるには？

    CSS で hover を使い、マウスオーバーするとリンクのテキストの上に画像を持ってくる（テキストが見えない状態にする）方法というのはありますか？ background-image を使うとテキストが見えてしまいます・・ マウスオーバーで　画像１→画像２　と表示させる方法はこちらの他の回答で見つけたのですが、テキスト→画像　と表示させる方法は見つかりませんでした。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • オンマウスでサムネイルを表示させるには？

    記事上の、画像URLを含んだテーブルにマウスオーバーする事で、リンク先のサムネイルを表示させるにはどうすればよいでしょうか？ こちらで紹介されている方法を参考にスクリプトを書き換えて試しているんですが 知識0からなので難しいです。 http://web.showjin.me/jquery_remoterollover.html どなたか詳しい方おられましたら是非ご教授ください。

  • ダイナミックテキストに入れるフォントは何をつかえばいいですか？

    WindowXPでブラウザはIEを使ってます。 フラッシュはMX２００４です。 私は、ダイナミックテキストには「Binner Gothic」というフォント入れてスコア表示用に使ってたのですが、私が作ったフラッシュをみた人から、スコアが大きくなると、数字が一桁消えると言われました。 私のパソコンで見てみると、数字が大きくなっても一桁も消えずにちゃんと表示されます。 私の家にはWindow98もあったので、そちらで確認してみたら、フォントが代用されてサイズが大きくなっていたため、一桁消えてました。 そこではじめて、いろんな人の環境に合うようなフォントを入れないといけないということを気付いたのですが、どのフォントが代用されずに入れられるのでしょうか？マックの人の基本フォントもまた違うんですよね？ その後、一桁見れなかった人の環境を聞いてみたら、私と同じWindowsXPでIEを使ってるということだったので、また混乱しました。 見れなかったのは、OSが違ったため、デフォルトフォントに「Binner Gothic」がなく代用されたと思っていたからです。 同じ環境でもフォントが変わってしまったということは、どういうことが考えられるのでしょうか？ あと、テキストツールで文字を入れた後、自由変形ツールで変形させた場合、ダイナミックテキストでスコアなどを表示する際、他の人のパソコンでもうまく表示されるものなんでしょうか？

    • ベストアンサー
    • Flash
  • オンマウスで説明表示

    こんにちは 最近HPつくりをはじめまして、プロフィールを作ってるのですが内容が多いのでちょっとシンプルにやろうかと思いましてこういうことが思いついたのですが、こういうタグは探してもございませんでした。 ご存知の方いらっしゃいましたら教えて頂けませんでしょうか？ やりたい事： メニュー１ メニュー２ メニュー３ とメニューがあるとすると メニュー１，２，３の説明をメニューのボタンに上にマウスを乗せるとセル(同一セル)の中に表示させたいです。 皆様の知識お貸し下さい。 宜しくお願い致します。

    • ベストアンサー
    • HTML
  • ブラウザにサーバー内のフォントでテキストを表示する

    かなり難しい問題かと思いますが、質問してみます。 サーバーとなっているOSにインストールされたフォントを使い、ブラウザへのユーザーのテキスト入力を受付ける形で表示したい。 つまり、ブラウザで「テキストは、あいうえお。フォントは平成ゴシック体」と指定してその通りに表示させたいのですが、いい方法はないでしょうか。 Flashなど特定のソフトを使っても、スクリプトでも、方法は問いません。 Flashで抱え込んだら何とかならないかと思うのですが、Flashの知識も乏しいので分かりません。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する