• ベストアンサー

オンマウスで解説が浮き出るようするには？

WEBサイトで、テキストの中の単語にマウスを置くと、その単語の解説が小さなフキダシのように 出てくる(そしてマウスを離すと消える)ようにしたいのですが、こういうものをなんと呼ぶのかわからず、なかなか検索もうまくゆきません。 javascriptではないかと思うのですが、このような物をなんと呼ぶのか、検索単語のヒント あるいはこのような方法を解説しているサイト等ご存知でしたらお教えください。

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

  • ベストアンサー
  • neko-ten
  • ベストアンサー率55% (1287/2335)
回答No.2

ツールチップ(ToolTip)スねー。 最近の流行ではJavaScript実装が多いッス。 http://kachibito.net/web-design/13-make-balloon-js.html

nyakuma
質問者

お礼

「ツールチップ」というのですね。 まさにこれです。ありがとうございました！

その他の回答 (1)

  • 4017B
  • ベストアンサー率73% (1305/1776)
回答No.1

単純に普通のHTMLで可能です。 <p>マウスを<span title="ポップアップで説明文が表示">ここ</span>に乗せると説明が表示されます。</p> ～以上の様な例文で可能です。 この場合は「title」という属性タグを、任意のタグにオプション的に付加する事によって、いわゆる簡易的な説明文をフキダシ表示のように表示させる効果があります。一部、対応出来ないタグもありますが、通常よく使われる文書用のタグ（p、div、span、b、a、strong、em～等々）なら、ほとんど対応してます。 JavaScriptで処理する場合は、適用させたい部分にやはり<span>を適当に割り振って、その中に onMouseOver/onMouseOut を付加します。ただし結局は何らかの属性値を割り振って、それをJavaScriptで書き換える処理になるので、やってることは前述のtitle属性と同じです。 なのでよりグラフィカルなポップアップを出すとか、半透明にするとかの特殊な効果を期待しない限り、通常は前述のtitle属性を付加させることで処理します。 より詳しい解説を探す場合には、 ＞http://www.google.com/search?hl=ja&safe=off&q=JavaScript+%E3%83%9D%E3%83%83%E3%83%97%E3%82%A2%E3%83%83%E3%83%97+%E8%AA%AC%E6%98%8E%E6%96%87&oq=JavaScript+%E3%83%9D%E3%83%83%E3%83%97%E3%82%A2%E3%83%83%E3%83%97+%E8%AA%AC%E6%98%8E%E6%96%87&aq=f&aqi=&aql=&gs_sm=e&gs_upl=4691l7130l0l8557l3l3l0l0l0l0l100l292l2.1l3 ～で探してみて下さい。

nyakuma
質問者

お礼

こんなシンプルな方法もあったのですね！ ありがとうございます

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

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

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

  • Javascriptを含むHTML構文解析プログラム

    JavaとJavascriptどちらに質問すべきか迷ったのですが こちらで質問させていただきます。 Javascriptを含むWebサイトのHTMLの構文を解析して、 そのサイトに表示されるデータなどを収集するjavaプログラムを作りたいんです。 Googleなどでいろいろ検索して調べたのですが、 このようなことを解説してくれているサイトが見当たらなかったので 解説してくれているサイトだとか書籍などを紹介していただきたいのです。 また、どのように作成していけばいいのか、大まかな流れだとかヒントになるようなことを教えていただいてもうれしいです。 Javascript自体は現在勉強中なレベルなのでまずはそこからではあるんですが・・・。

    • ベストアンサー
    • Java
  • オンマウスでの画像＋テキスト表示

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

  • javascriptの解説

    http://shanabrian.com/web/jquery/circle-animation.php こちらのサイトのjavascriptのコード20,21行目がよくわからないのでどなた解説していただけないでしょうか。 step : function(now) { angle = now * 180; } function()のかっこのなかでnowがあるのでこれは引数なようにみえるのですが、関数じゃないので引数でもありません。 この「now」の意味することと役割が全然わかりません。 どなたかよろしくお願いします。

  • オンマウスで解る方法教えて！

    htmlでテキスト文章を画像としてリンクファイルでアップしています。 この場合で、マウスを乗せると乗せたことが解るようにしたいのですが、画像の場合はどのような方法があるのでしょうか？ 画像の入れ替えは望んでいません。例えば、画像全体の色が変るとか、画像枠が表示される等を望んでいます。 cssではなしにhtmlで書きたいと思っています。 検索してもヒットしません。詳しい方居られましたら宜しくお願いします。

  • ＩＴパスポートの過去問について

    ＩＴパスポートの過去問についてご教授願います。 今度、ＩＴパスポートの試験を受けるのですが、ネットより過去問を検索してもＷＥＢ上で操作するサイトはあっても ダウンロードできるサイトが見つかりません。ＰＤＦまたはテキスト形式の物をダウンロードしてテキスト変換したいと 思っています。どなたか、そういうサイトをご存知ないでしょうか？ ついでいうと、正解だけでなく解説付きのサイトが一番なんですが。 宜しくお願いします。

  • Javascriptでこんな処理できますか？

    初心者必見！JavaScriptでできることと作れるものってどんなもの？ https://www.sejuku.net/blog/3936 これをみるとJavascriptでできること WEBサイトに「動き」を加える 具体例1:HTML要素を追加 具体例2:CSSを変えて見た目を変更 イベント処理 JavaScriptは、マウスの動作やクリックされたという動作をイベントとして取得することができます。 そのイベントと紐づけて、いろいろな動作をつけることも可能です。 非同期通信 非同期通信を使ったアプリは、サーバーの応答を待たず次々と処理を行うことができます。 が出来るとききました。 そこで、 JavascriptでCSVの加工をする http://dripn-snip.com/2018/02/15/csv-js/ JavaScriptでCSVを扱うためには、5つのステップを経る必要があります。 1.ブラウザにCSVを読み込ませる 2.CSVをJavaScriptで扱える形式（配列）に変換する 3.配列を操作する 4.配列をCSVに戻す 5.ダウンロードする でのやり方のようにすれば、 自分のやりたい、 1.ブラウザに編集対象WEBサイトページを読み込ませる 2.ページ内テキストを取得し正規表現で取り出す。 3.取り出したテキストでーたからISDNコードを抽出し 4.Amazonで検索。検索結果を表示 こういう処理ももちろんできますよね？ 頭が悪いのですが、努力はしようと考えているのでやろうと思っています。 家にあった、Javascriptの入門書をみていたら正規表現などの軽い解説があるのと DOMの解説、基本的な文法の解説だけだったのでいまいちピント来ませんでした。 アドバイスよろしくお願いします。

  • 考え方の出所がわからない解説

    問 箱と球が４個ずつあり、それぞれに１～４の数字が１つずつ書いてある。箱の中に球を１つずつ入れるとき、箱の数字と球の数字がすべて一致しない確率はどれか。 テキストの解説 まったく一致しない組合せは９通り ↓ 求める確立は、９／（４×３×２×１）＝３／８ サッパリわからないんですが、（４×３×２×１）ってのは、一体どこからでてきて、何を求めるための式なのですか？ 解説を読んでも、何をヒントにたてた式なのか全然わからないんです。全く同じケースの問題を解いたことがあれば、「この場合はこう解けばいい！」とわかりますが、同じケースの問題を解いたことがなければ、それはわからないことです。 宜しくお願いします。

  • 似ている英単語の使い分けを解説しているサイト

    英単語には日本人では使い分けの困る単語がたくさんありますが、 そういった似ている英単語の使い分けを解説してくれているサイトを ご存知であればお教えねがえないでしょうか？

  • オンマウスで文字そのものを変える方法を教えてください。

    初めて挑戦したＨＰがほぼできあがりました。 メニューが英文でわかりにくいかもしれませんので、テキストにマウスを乗せると日本語に変わる、あるいは英語の隣に日本語が出現するように、手を入れたいと思います。　 文字の装飾や画像を使う方法は検索できましたが、文字→文字がなかなか見つかりません。　よろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する