リンクにマウスオーバーで指定の場所に文字や画像など

このQ&Aのポイント
  • リンクページで、バナーに触れると、上の辺りにあった空白部分にバナーと管理人名、説明などが出るようにしたい。
  • これまではテキストエリアを使用して説明を表示していたが、タグが使えないため画像の表示ができず、インラインフレームの使用を検討している。
  • リンク(画像も文字も)にマウスオーバーすると、指定した場所にバナーと管理人名、説明などの情報を表示する方法を教えてください。
回答を見る
  • ベストアンサー

リンクにマウスオーバーで指定の場所に文字や画像など

リンクにマウスオーバーすると、指定した場所に文字とか画像とかを表示させたいのです。 リンクページで、バナーに触れると、上の辺りにあった空白部分(テキストボックスでもなんでもいいですし空白じゃなくてもいいです)の中に、 バナーと管理人名、説明etc...と説明が出るようにしたいです。 わかりにくくて申し訳ないです。 今まで、HEAD内に <script language="JavaScript"> <!-- function sp(msg){ if(msg==""){linkinfo.innerHTML="..."; }else{linkinfo.innerHTML=msg;}} //--> </script> と入力し、適当なテキストエリア <p><textarea width="300" height="70" id="linkinfo"></textarea></p> とかを表示させ、リンクのaの中に onMouseOver=sp("説明1"); onMouseOut=sp("マウスを離れた時の説明(基本的には説明1と同じ内容ですが)"); を入れて、 リンク(画像も文字も)触れると、テキストエリアに説明1やらが出てくる方法を使っていました。 しかし、テキストエリアはタグが使えないので、画像の表示ができなくて… インラインフレームはあまり使いたくないのですが、他に方法がなかったらインラインフレームでこんな感じに表示できるタグを教えて下さい。 ちなみに、「今まで、HAD内に~」のサンプルはこちらです。→http://www49.atpages.jp/kstr/mmm.html

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

  • ベストアンサー
  • nana_coco
  • ベストアンサー率66% (56/84)
回答No.1

こんにちは。 jQueryですが、こちらのサイトがご参考になるでしょうか? http://web.showjin.me/jquery_remoterollover.html 「リモートロールオーバー javascript」で検索すれば色々出てくるかと思いますよ^^

Sa_sasasa
質問者

補足

回答ありがとうございます。 すみません…できれば画像のみじゃなくて文字と画像を一緒に表示させたいのです。

関連するQ&A

  • リンク先の画像をテキストボックスに表示するには

    HPのリンクタグについて質問させていただきます。 質問タイトル通りで、リンク先の画像(バナー)を、テキストボックスに表示するにはどんなタグを使えばいいのでしょうか? リンク先の『説明』をテキストボックスに表示するタグは検索をしてたくさん出てきたのですが、画像を表示するというタグが出てこなくて… 考えている仕組みは、リンクが張ってあるテキストにオンマウスすると、同ページにあるテキストボックスにそのリンク先のバナーが表示されるという感じです。 ちなみにテキストボックスは200×40バナー大の一行テキストボックスがいいのですが…。 よろしくお願いします。

  • マウスオーバー時の文字サイズ

    テキスト文にマウスを合わせると指定したポイントに文字列を表すようにしたいです。 -------------------------------------- <SCRIPT language="JavaScript"> <!-- msg=new Array(); msg[0]=""; msg[1]="こんにちは"; function Msg(index){ if(document.all){ box.innerHTML = msg[index]; }else if(document.layers){ document.box.document.open(); document.box.document.write(msg[index]); document.box.document.close(); } } //--> </SCRIPT> <DIV id="box" style="position:absolute;top:250;left:350;"></DIV> <a href="http://abc.html" target="_blank" onMouseOver="Msg(1)" onMouseOut="Msg(0)">あいさつ</a> ------------------------------------ 上記の文章はどこかのサイトにある構文をコピペ、参考にさせていただいたものです。 これで一応表示されるのですが、 このとき、表示される「こんにちは」の文字サイズ、色を指定することは出来ますでしょうか? また、座標を指定していますが、ブラウザーやOS、解像度などの違いが表示に影響することはありませんでしょうか?

  • 画像上にリンクとインラインフレームを同時作成

    大きな画像一枚でHPを作成したい場合、画像上にリンクを貼るのと、画像にインラインフレームを同時に作成するのは可能でしょうか? 添付した画像をご覧いただければわかってもらえると思いますが、 個々のLiveやら、Discographyやらにリンクを貼るだけなら私でも可能なんですが、それプラスNewsと書いてあるところの下段の空白にインラインフレーム等で、お知らせをスクロールできるように表示したいのです。 これらを同時にHTMLで作成するのは可能でしょうか? その空白内にスクロールできてHTMLも使えるようなボックスでしたらインラインフレームでなくてもよいです。 可能でしたらお手数ですがやり方をご教授ください…お願いします!

  • リンクする画像とテキストをくっつけるには?

    ブログでHTMLタグを使いたいのですがまだよく分かりません。 テキストをクリックしたらリンクするためのHTMLタグは次の通りですよね。 <a href="リンク先URL">表示するテキスト</a> 画像(写真)をクリックしたらリンクするためのHTMLタグは次のようになりますよね。 <A Href="リンク先URL"><img src="画像のアドレス"><A>  私は現在、テキストと画像の両方を同じサイトにリンクさせるのに、上の二つのタグを使っているのですが、本文に表示されると二つが離れてしまいます。よく、画像とテキストが一体化しているのを見るのですが、そうするにはどうしたらいいのでしょうか?ご教授願えませんか?

  • textareaに画像を表示したい

    textareaの入力支援を作成しています。 PHPで画像のディレクトリを開き別窓などに一覧表示させ、 その画像をクリックでjQueryでテキストエリアへタグを挿入。 <textarea id="test"> あああ <img src="hoge.jpg"> いいい </textarea> ↑のようにIMGタグを挿入する状態までは実装させることが出来るのですが、 UI的に、このIMGタグを画像(サムネ)として表示させたいと考えています。 <textarea id="test"> あああ ■(←画像) いいい </textarea> テキストエリアを監視して置換するなど方法はありそうなのですが そもそもテキストエリア内で画像を表示させることができるのでしょうか? 何かいいアイディア、あるいはプラグイン等がありましたら教えてください。

  • リンクしない画像の貼り付け方について

    FC2でブログを書いています。 記事中に写真を貼り付けたり、リンクバナーを貼り付けるやり方はわかるのですが、写真やバナーをクリックすると別のベージに飛んでしまいます。  お聞きしたいのは、リンクさせずに画像や写真だけを貼り付ける方法です。写真や画像をクリックできなくする方法はありますか? ちなみに記事中ではなくプラグインのフリーエリア内に画像を貼り付けたいと思っています。

  • textarea内の文字からリンクするには

    textarea内の文字からリンクして別のぺージに移動するにはどうすればいいでしょうか? リンクのタグをいれたらそのまま表示されてしまいました。

  • JavaScriptで呼び出したテキストリンクを画像にするには

    Java Scriptで呼び出したテキストリンクを、画像に替えたいのですがうまくいきません。人がつくったScriptの改造なので、今ひとつわかりにくくて困っています。 ソースは function callJavascript(str) { var obj = parent.document.getElementById('maryleTVLink'); obj.innerHTML = "<a href='http://localhost:8888/cb/cframe_play.php?user=tbsv1&idx=" +str+ "' onclick=\"return GB_myShow('MaryleTV', this.href)\">大きく見る</a>" ; } です。 作りとしては、callJavascriptを読み込んでいる画像(Flash)をクリックすると、テキストリンクが表示される、というものです。 「大きく見る」の部分を画像のボタンにしたいのですが、 どうしたら良いか教えてください。

  • 画像クリックでテキストエリアにソース表示

    こんにちは。 色々調べてみましたが壁にぶつかってしまい、こちらで質問させて頂きます。 内容は、バナー画像が数種類ありその画像をクリックすると、 テキストエリアに設置タグを表示するという事がしたいです。 また、違うバナー画像をクリックすれば前回表示されていたタグは 消えて、新しいタグが表示するようにしたいです。(テキストエリアは同じ) みなさまどうかご教授頂ければ幸いです。

  • リンクをオーバーマウスで画像表示

    リンクにポインタを当てると画像と説明がポップアップされる仕様のhtmlを作りたいと思っています。 下記URLの様なものが理想です。 http://www.yaplog.jp/DesignSelect.blog 似たようなものはいくつか見つけれましたが 「ひとつのリンクにしか割り当てれない」 「画像しか表示できない」 などいずれも制限があるものでした。 どなたか上記の方法をご存知でしたらご伝授お願いできないでしょうか。 よろしくお願いいたします。