マウスオン＆アウトで小画面を開閉できないでしょうか？

前へ 次へ
このQ&Aのポイント
  • JavaScriptでマウスオンでメッセージを表示する手法がありますが、背景2色+文字色2色で表現する方法について教えてください。
  • 画像のある部分にポインタが乗ると小画面が表示され、ポインタをどかすと小画面が閉じるスクリプトの作成方法を教えてください。
  • マウスオン＆アウトのイベントを使って、小画面を開閉させるスクリプトを公開しているサイトやリンクを教えてください。
回答を見る
  • ベストアンサー

マウスオン＆アウトで小画面を開閉できないでしょうか？

JavaScriptで、マウスオンでメッセージを表示する手法がありますが、このメッセージを背景2色+文字色2色で表現する必要が生じました。 単純に１色の背景に１色の文字でない場合は、ちゃんと１枚のページとして表示させないと無理のように思いますが、そうなると、画像のある部分にポインタが乗ると小画面を表示し、ポインタをどかすと小画面が閉じるというスクリプトが必要になります。 このようなスクリプトを公開していらっしゃるサイトをご存知の方や、リンクをクリックすることで小画面を表示するスクリプトを改造してこの目的を達する方法をご存知の方がいらっしゃいましたら、教えて頂けませんでしょうか？ どうかよろしくお願い致します。

  • chack
  • お礼率100% (283/283)

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

  • ベストアンサー
  • Masazo-
  • ベストアンサー率48% (12/25)
回答No.1

ソースは分からないので考え方を（しかもIEしか知りません）・・・。 １．非表示のSPANを隠し持っておく（position:absoluteで）。 ２．画像にマウスが乗ると表示する。位置はevent.screenXとかで指定 ３．SPANからマウスが離れるとまた非表示にする。 メッセージボックスの様な「画面」とは見た目が違いますが・・・。

chack
質問者

お礼

ヒントをどうもありがとうございました。 今は私も具体的にソースがわかるわけではありませんが、頂いたヒントを元に会社の仲間の力を借りて実現できそうな見通しが付きました。 > メッセージボックスの様な「画面」とは見た目が違いますが・・・。 そうですよね。普通に小画面を開いてしまうと、親画面は１つ下層に行ってしまうのでマウスonもoutも検出できなくなってしまいますものね。 そこに気づいて、これは解決法はないかもしれないと諦めかけていたのですが、おかげ様で助かりました。どうもありがとうございました！

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

関連するQ&A

  • マウスオンで画面中央に別の画像を表示する方法

    マウスが文字や画像の上にきた時（マウスオン）に、lightboxのように、画面の中央に別の画像を表示させるには、どうやればいいのか教えてください。 javaの関連記事を検索していますが、元の画像の位置が基準となっているものばかりです。 現在は、lightboxでしていますが、これは、クリックする必要があるので、マウスオンでやりたいと思っています。よろしくお願いします

  • 【javascript】マウスオンで画像表示を変更させる。

    【javascript】マウスオンで画像表示を変更させる。 マウスオンで画像の切り替えはできますが、 http://www.hotpepper.jp/ フームーの写真ギャラリーように切り替え時にぼかしたいのですが、 これは簡単な事でしょうか？ そういったタグを紹介しているサイト等ご存知でしょうか？

  • ～マウスオンしたときに下線を表示させたい～

    すみません。教えてください。 リンク先の下線を消す場合、要素に直接書くときは下記のように書けばいいのですよね。 <a href="リンク先" style="text-decoration:none;">文字</a> マウスオンしたときだけ下線を表示させる場合はどうしたらいいのでしょうか。 お分かりの方宜しくお願いします。

    • ベストアンサー
    • HTML
  • マウスオンでのリンク先表示について

    ＩＥで表示したｗｅｂページ内でリンクが貼られた文字の上にマウスオンすると　リンク先情報がテキストで表示されるにはどのような設定をすればよいのでしょうか？ テキストのリンク先情報は、表示されるＰＣと表示されないＰＣがありＰＣ側の何らかの設定、ソフトの導入が原因だと思われます。 よろしくお願い致します。

  • フラッシュの様に

    あるサイトでリンクの文字にマウスオンするとフラッシュを使っているかのように文字の色が綺麗に変化するんです。 フラッシュを使ってるのかと思ったので右クリックしてみたのですが 普通のリンクを右クリックしたときと同じものしか表示されませんでした。 ソースを覗かせてもらったのですが、外部ジャバスプリクトで呼び出しているので見れません。 使用してみたいと思ったのですが、どのジャバスクリプトサイトにも載っていないので 説明が下手なのでわかりにくいとは思いますが(URLを乗せるのは禁止のようなので) どなかたかこのようなジャバスクリプト（？）をご存知の方がいましたら教えて下さい。 ※HTMLやCSSのリンク文字にマウスオンでリンク文字色が変化するのとは違いますのでよろしくお願いします※

  • プルダウンの画面を最前面にするには？

    Movable Typeのブログに、以下のリンク先の「本棚」のブログパーツを設置しました。 http://www.bossabooks.jp/cafe/bp/about.html 上記サイトで設定してできたタグは以下のとおりです。 <script type="text/javascript" charset="UTF-8" src="http://node3.nirvanix.com/bossabooks/jp/bp/mini/mini.js"> </script> <script type="text/javascript">miniMyshelf('▲▲▲', '★★★', '', '1', '', 'colors/natural', '#CCCCCC', true); </script> ▲、★は、私のＩＤなど。 このタグで、設置自体はできたのですが、 この本棚にポインタを置くと出てくるプルダウンの画面の下の方が、 表示が切れて（隠れて）しまいます。 プルダウンの表示を最前面にして表示が切れないようにするには、どうすればいいでしょうか。

    • ベストアンサー
    • HTML
  • 画面のブラックアウトについて

    富士通LIFEBOOK AH42/B2を1週間ほど前に購入しました。 onedriveにアクセスできなかったため、再起動しようとしたところ、windows office managerが起動中なのでシャットダウンできないというようなメッセージが出てきたため、キャンセルしたところ、画面が暗くなりマウスポインタのみ表示されます。 電源を切入してもログインまではできるのですが、その後また暗い画面とマウスポインタのみ表示されます。 この状況の改善方法をご教示くださいますよう、よろしくお願い致します。 ※OKWAVEより補足：「富士通FMV」についての質問です。

  • 画面が遷移したみたいになってしまいます。

    画面ロード後にjavascriptで動的にまたjavascriptタグを表示しています。 以下のjavascriptを組み込んでみたところ、取得したjavascriptを表示したときに画面遷移したみたいになってしまいました。 どうすればきちんと表示されるようになるでしょうか。 <div id="position"></div> <script language="javascript">// <!-- var timer = setInterval("Timer()", 1000); function Timer() { var position = document.getElementById('position'); var script = document.createElement('script'); script.setAttribute('type', 'text/javascript'); script.setAttribute('src', 'http://hogehoge/getjs'); position.appendChild(script); clearInterval(timer); } // --></script> http://hogehoge/getjsからはコンテンツの部品を表示するjavascriptが入っています。

  • マウスオンしても矢印が手のひらになりません！

    area shapeのリンクの上にjava scriptで別ウィンドウに開く指定をしてます。その上にマウスを載せると手のひらになりません。 DWでコーディングをして画像に直接リンクを貼るしか出来ないデザインなのでarea shapeを使っています。 その上から開く一つのボタンが別ウィンドウでしかも画面サイズも指定しないといけないものなので java scriptでそのようになるようにしています。 するとマウスがオンした際に矢印が手のひらになりません＞＜ area shapeの中にstyle="cursor:pointer"を貼ったのでMacでは手のひらになります。 ですがWindowsではなりません・・・・ MacではむしろならなくてもいいのでWindowsでの解決方法を教えて頂けたら幸いです。 よろしくお願い致します！！ 記載している事は以下です。 <area shape="circle" coords="247,103,73" onClick="wopen3()" style="cursor:pointer"> <!-- function wopen3(){ win=window.open("pv.html","pv","width=330,height=290"); win.moveTo(100,100); }

    • ベストアンサー
    • Mac
  • 画面の表示色について

    ノートパソコンを使っています。メーカは富士通、型番はFMVNB18CTです。 インタネットに接続したとき、画面の色が一部出ません。具体的には背景色が白く表示されたり、色文字が黒くなったりします。ただし、リンクが貼られている青文字の部分はちゃんと表示されています。どなたか解決の方法をご存知ありませんか？

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する