- ベストアンサー
画像の上にマウスが乗ったときに、指定した場所にテキストを表示させる方法！
画像の上にマウスが乗っている時に、指定した別の場所に、任意のテキストを表示したいのですが、このようなことができる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も同様。
