- ベストアンサー
オンマウスでテキストを表示するためには
noname#84373の回答
簡単そうだから手をつけてみたが、意外と時間がかかってしまった;_; 使い方、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>
- noname#84373
- noname#84373
- noname#84373
- noname#84373
- noname#84373
- noname#84373
- noname#84373
- noname#84373
関連するQ&A
- <IMG SRC=" " ALT=" ">のテキストがマウスを乗せている間表示するには？
<IMG SRC=" " ALT=" ">のタグで画像の上にマウスを合わせると、テキストが表示されるようにしています。しかし、これだと数秒後には、マウスを合わせているのに表示が消えてしまいます。これをマウスを合わせている間は、テキストが表示されるような設定にするにはどうすればよいでしょうか？どなたかご存知の方は教えてください。よろしくお願いします。
- 締切済み
- HTML
- オンマウスでの画像＋テキスト表示
いつも的確な回答をいただいて、非常に感謝しております。 違うカテで同じような質問をさせていただいたのですが少しやりたいことが変わったので 再度、質問いたしました。 今、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 どなたか詳しい方おられましたら是非ご教授ください。
- ベストアンサー
- JavaScript
- ダイナミックテキストに入れるフォントは何をつかえばいいですか？
WindowXPでブラウザはIEを使ってます。 フラッシュはMX２００４です。 私は、ダイナミックテキストには「Binner Gothic」というフォント入れてスコア表示用に使ってたのですが、私が作ったフラッシュをみた人から、スコアが大きくなると、数字が一桁消えると言われました。 私のパソコンで見てみると、数字が大きくなっても一桁も消えずにちゃんと表示されます。 私の家にはWindow98もあったので、そちらで確認してみたら、フォントが代用されてサイズが大きくなっていたため、一桁消えてました。 そこではじめて、いろんな人の環境に合うようなフォントを入れないといけないということを気付いたのですが、どのフォントが代用されずに入れられるのでしょうか？マックの人の基本フォントもまた違うんですよね？ その後、一桁見れなかった人の環境を聞いてみたら、私と同じWindowsXPでIEを使ってるということだったので、また混乱しました。 見れなかったのは、OSが違ったため、デフォルトフォントに「Binner Gothic」がなく代用されたと思っていたからです。 同じ環境でもフォントが変わってしまったということは、どういうことが考えられるのでしょうか？ あと、テキストツールで文字を入れた後、自由変形ツールで変形させた場合、ダイナミックテキストでスコアなどを表示する際、他の人のパソコンでもうまく表示されるものなんでしょうか？
- ベストアンサー
- Flash
- オンマウスで説明表示
こんにちは 最近HPつくりをはじめまして、プロフィールを作ってるのですが内容が多いのでちょっとシンプルにやろうかと思いましてこういうことが思いついたのですが、こういうタグは探してもございませんでした。 ご存知の方いらっしゃいましたら教えて頂けませんでしょうか？ やりたい事： メニュー１ メニュー２ メニュー３ とメニューがあるとすると メニュー１，２，３の説明をメニューのボタンに上にマウスを乗せるとセル(同一セル)の中に表示させたいです。 皆様の知識お貸し下さい。 宜しくお願い致します。
- ベストアンサー
- HTML
- ブラウザにサーバー内のフォントでテキストを表示する
かなり難しい問題かと思いますが、質問してみます。 サーバーとなっているOSにインストールされたフォントを使い、ブラウザへのユーザーのテキスト入力を受付ける形で表示したい。 つまり、ブラウザで「テキストは、あいうえお。フォントは平成ゴシック体」と指定してその通りに表示させたいのですが、いい方法はないでしょうか。 Flashなど特定のソフトを使っても、スクリプトでも、方法は問いません。 Flashで抱え込んだら何とかならないかと思うのですが、Flashの知識も乏しいので分かりません。
- ベストアンサー
- グラフィックソフト
補足
回答ありがとうございます。 おお！ これは凄く良いですね！わざわざ作っていただきお手数お掛けしました。ありがとうございます。 ただ…少し不便な点があり、テキストの上にマウスを乗せるとウィンドが飛び出すのは良いんですが、この後が少々問題です。 一度飛び出したウィンドにマウスを乗せないとウィンドが消えないようになっているようです。 これによって、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」は、どこに付けるのか教えていただけないでしょうか？ 色々とあつかましい質問ですが、よろしくお願いします。