- ベストアンサー
画像の上にマウスが乗ったときに、指定した場所にテキストを表示させる方法！
画像の上にマウスが乗っている時に、指定した別の場所に、任意のテキストを表示したいのですが、このようなことができるJavaScriptはあるのでしょうか？ 例えば、写真集のようなものを作るときに、その写真の上にマウスを合わせると、決まったところに、その説明文がテキストで表示されるようにしたいのです。 もしあるようであれば、ぜひ教えてください。
- pirokore
- お礼率42% (164/389)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
すでに出ている#1の回答で十分とは思いますので、蛇足ですが… <html> <head> <title></title> <script type="text/javascript"><!-- var msg= new Array(); msg[0]="画像0の説明"; msg[1]="画像1の説明"; msg[2]="画像2の説明"; msg[3]="画像3の説明"; msg[4]="画像4の説明"; /* ここで必要な分だけ画像の説明を入れておきます。 */ function msgOn(i){ if (document.getElementById){ document.getElementById("mesTxt").innerHTML=msg[i]; } else { document.f1.msgtxt.value=msg[i]; } } function erase(){ if (document.getElementById){ document.getElementById("mesTxt").innerHTML=""; } else { document.f1.msgtxt.value=""; } } window.onload=erase; //--></script> </head> <body> <a href="#" onClick="return false;" onMouseover="msgOn(0)" onMouseout="erase()"><img src="***0.jpg" alt="画像0"></a> <a href="#" onClick="return false;" onMouseover="msgOn(1)" onMouseout="erase()"><img src="***1.jpg" alt="画像1"></a> <a href="#" onClick="return false;" onMouseover="msgOn(2)" onMouseout="erase()"><img src="***2.jpg" alt="画像2"></a> <a href="#" onClick="return false;" onMouseover="msgOn(3)" onMouseout="erase()"><img src="***3.jpg" alt="画像3"></a> <a href="#" onClick="return false;" onMouseover="msgOn(4)" onMouseout="erase()"><img src="***4.jpg" alt="画像4"></a> <!-- 以上 画像表示部 --> <div id="mesTxt"> <form name="f1"> <textarea rows="5" size="40" name="msgtxt"></textarea> </form> </div> <!-- 以上、テキスト表示部 --> </body> </html> このようにすると、動的にHTMLの文章を変化させることができます。 テキストエリアを使う場合よりも少し自由なデザインが可能なのではないかと思います。 また、上の場合、DOMに対応していない古いブラウザでは、テキストエリアが表示され、そこに各画像の説明が表示されるようになっています。 こういった方法もありますよ。 ご参考までに…
その他の回答 (2)
実際はNo1さんの方が正攻法ではありますが <img src="[画像ファイル]" alt="[表示させたい文字]"> これで一応マウスがのっている時に文字はでます…
- the845t
- ベストアンサー率33% (246/743)
<script language="JavaScript"> <!-- function ShowText(id){ ms = new Array(); ms[0] = "1の画像です。"; ms[1] = "2の画像です。"; ms[2] = "3の画像です。"; ms[3] = "4の画像です。"; ms[4] = "5の画像です。"; document.TextIn.TextIn.value = ms[id]; } function ClearText(){ document.TextIn.TextIn.value = ""; } // --> </script> <img src="1.gif" width="20" height="35" onMouseOver="ShowText(0)" onMouseOut="ClearText()"> <img src="2.gif" width="20" height="35" onMouseOver="ShowText(1)" onMouseOut="ClearText()"> <img src="3.gif" width="20" height="35" onMouseOver="ShowText(2)" onMouseOut="ClearText()"> <img src="4.gif" width="20" height="35" onMouseOver="ShowText(3)" onMouseOut="ClearText()"> <img src="5.gif" width="20" height="35" onMouseOver="ShowText(4)" onMouseOut="ClearText()"> <form name="TextIn"> <input type="text" size="40" name="TextIn"> </form> でいかがでしょう。 Netscape4.xで反映されるのであれば、 <img>のonMouseoverが効きませんので、 <a>で囲ってそれにonMouseOverを指定すれば良いかと。 onMouseOutも同様。
関連するQ&A
- 画像中のある座標でマウスオーバー時にポップアップテキスト
画像の中の任意座標にマウスをもっていった時に、マウスより少し上の位置に説明文等のテキストをポップアップ表示させ、マウスアウトでポップアップ表示を消すのに何か良い方法はありませんか？ 画像はテーブルで分割していない一枚のイメージで”画像の中のある場所”はランダムです。 表示イメージはこんな感じ ●：画像中の任意の座標 -------------------------------- ｜ ● ｜ ｜ ココに説明文をポップアップ表示 ｜ ●＜-（マウス） ｜ ｜ ● ｜ ｜ ● ｜ --------------------------------
- ベストアンサー
- JavaScript
- ロールオーバーの上にテキストを表示するには？
JavaScriptでロールオーバーを設置したのですが、その画像の上にテキストで説明を表示するにはどうしたらよいのか教えていただけるでしょうか。（テキストはマウスと関係なく常時表示） よろしくお願いします。
- 締切済み
- JavaScript
- マウスオーバーで別の場所にテキスト表示
テキストにマウスが乗ると、別の場所(フレーム以外) にテキストを表示させたいのですがどう書けばいいんですか？ よく、洒落たサイトでリンクにマウス乗せると、説明が別の場所に出るじゃないですか アレです
- ベストアンサー
- HTML
- テキストにオンマウスで指定箇所に画像を表示
画像またはテキストリンクにオンマウスすると指定の場所にそれぞれのリンクで 指定の画像を表示するようにしたいのですが、色々調べてみたもののよくわかりませんでした。 リンク１にオンマウスして画像が出て、そのリンク１からマウスを放しても 別所に表示された画像はそのままで、次のリンク２にオンマウスすると 次の画像と入れ替わる、というようにしたいのですが・・・説明が下手ですみません＾＾； このようにしたい場合、どのようにしたらいいでしょうか。
- ベストアンサー
- JavaScript
- CSS マウスオーバーでテキストの上に画像を表示させるには？
CSS で hover を使い、マウスオーバーするとリンクのテキストの上に画像を持ってくる（テキストが見えない状態にする）方法というのはありますか？ background-image を使うとテキストが見えてしまいます・・ マウスオーバーで 画像１→画像２ と表示させる方法はこちらの他の回答で見つけたのですが、テキスト→画像 と表示させる方法は見つかりませんでした。 よろしくお願いいたします。
- ベストアンサー
- HTML
- リンクにマウスオーバーで指定の場所に文字や画像など
リンクにマウスオーバーすると、指定した場所に文字とか画像とかを表示させたいのです。 リンクページで、バナーに触れると、上の辺りにあった空白部分（テキストボックスでもなんでもいいですし空白じゃなくてもいいです）の中に、 バナーと管理人名、説明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("説明１"); onMouseOut=sp("マウスを離れた時の説明（基本的には説明１と同じ内容ですが）"); を入れて、 リンク（画像も文字も）触れると、テキストエリアに説明１やらが出てくる方法を使っていました。 しかし、テキストエリアはタグが使えないので、画像の表示ができなくて… インラインフレームはあまり使いたくないのですが、他に方法がなかったらインラインフレームでこんな感じに表示できるタグを教えて下さい。 ちなみに、「今まで、HAD内に～」のサンプルはこちらです。→http://www49.atpages.jp/kstr/mmm.html
- ベストアンサー
- その他（インターネット・Webサービス）
- マウスオーバーイベントで画像表示
こんにちわ。 JavaScriptについて質問があります。 あるリンクの上にマウスを重ねると、テーブルのある場所にイメージを表示させることはJavaScriptで可能でしょうか？ やりたい事としては、リンク部分にマウスを重ねると、そのリンクの説明を記した画像をテーブル中に表示させたいと思ってます。 ネットを探しまくったのですが、参考になりそうなページが無かったので質問してみました。 参考になるページでも構いませんので、知っている方がいらっしゃったら宜しくお願いします。
- ベストアンサー
- JavaScript
- Dreamweaver 画像の上にマウスポインターを当てるとテキストが表示するには？
Dreamweaverでホームページを作成してるのですが、画像の上にマウスポインターを当てるとテキストが表示されるページを良く見かけるのですが どのような設定でテキストを表示させるのでしょうか？出来ればデザイン画面で編集出来る方法を教えて下さい。 Macを使っています。よろしくお願いします。
- 締切済み
- ホームページ作成ソフト
- テキストにマウスを置くと同じ位置に画像がでる方法・1
Javascript初心者です。 サンプル集のあるサイトでプログラムをコピーしたのですが、 そのサンプルはテキストの横に画像がでる仕組みのものなのですが （以下のプログラムはそういう内容のものです）、 私が行いたいことは、これを応用して、テキストの上にマウスをおくと 画像が同じ位置にでるようにできないだろうか、と思っています。 （もしくわテキストの真下にでるとようにしたい） またテキストでそれができない場合なら、画像で同じ位置で違う画像がでるようにしたいと思っています。 どの部分を修正・変更したらよいのか、教えて頂けると非常にありがたいです。 どうぞご指導よろしくお願いいたします。 （プログラムは2番めの質問に明記致します。）
- 締切済み
- JavaScript
- サムネイルにマウスで画像表示
HTML勉強中の者です。 5つのサムネイルにマウスをのせると、同一ページの同じ場所（1箇所）にそれぞれの画像を表示させ、マウスが離れると表示を消す方法---(1) とそのまま表示する方法---(2)を教えてください。 （HTMLで可能であればその方が良いのですが、自分が勉強した範囲ではできません。別HTMLリンクならわかりますが・・・） Javascriptなら可能でしょうか？ よろしくお願いいたします。
- ベストアンサー
- JavaScript
