- 締切済み
画像をオンマウスして表示テキストを変えるjavascript
アイコン(画像)がいくつかあったとします。その一番下には文章を書くスペースがあります。 私がしたいのは画像にマウスをあわせたら自動的にテキストがその画像に対応し変わるということです。 そのようなjavascriptはどのように作るのですか？
- esls
- お礼率53% (122/229)
- ホームページ作成ソフト
- 回答数3
- ありがとう数0
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
#2です。 こんにちは。 ご質問を見直してみたら、意味が少々違っていたみたいですね。 ということで、再度、こんな感じ？（要領はほとんど同じですが） <html> <head> <style type="text/css"> .photoList { margin-top:1em; } .photoList img { width:80px; height:60px; margin:1px; } #showSpace { width:360px; border:1px solid gray; } #showSpace div { display:none; } </style> <script type="text/javascript"> function showBox(evt) { var i, n = 0, t = evt.target || evt.srcElement; if (t.nodeName=='IMG') { while (t=t.previousSibling) if (t.nodeName=='IMG') n++; var t = document.getElementById('showSpace').getElementsByTagName('DIV'); for (i=0; i<t.length; i++) t[i].style.display = i==n?'block':'none'; } } </script> </head> <body> <div class="photoList" onmouseover="showBox(event)"> <img src="A.jpg"> <img src="B.jpg"> <img src="C.jpg"> <img src="D.jpg"> </div> <div id="showSpace"> <div>テキスト：これはA.jpgに対応する文章</div> <div>文字だけじゃなくて画像も入れてみたりして…<br> <img src="B.jpg" width="80px"></div> <div>要は対応するところにテキストをいれておけばいいってこと</div> <div>テーブルとかも… <table border=1><tr><td>1-1</td><td>1-2</td><td>1-3</td></tr> <tr><td>2-1</td><td>2-2</td><td>2-3</td></tr></table> </div> </div> </body> </html>
- fujillin
- ベストアンサー率61% (1594/2576)
こんな感じでしょうか？ photoList内の画像をクリックすると、photoの画像がそれに変わるという仕組みです。 <html> <head> <style type="text/css"> .photo { width:400px; height:300px; background-color: #000; } #photoList { margin-top:1em; } #photoList img { width:80px; height:60px; margin:1px; } </style> <script type="text/javascript"> function changePhoto(evt) { var t = evt.target || evt.srcElement; if (t.nodeName=='IMG') document.getElementById('photo').src = t.src; } </script> </head> <body> <div class="photo"> <img id="photo" class="photo" src="A.jpg"> </div> <div id="photoList" onclick="changePhoto(event)"> <img src="A.jpg"> <img src="B.jpg"> <img src="C.jpg"> <img src="D.jpg"> </div> </body> </html>
私は、泥棒みたいなやり方でやります。 他人のＨＰを見て、「お～っ、これどうやってするの？」 と思うと、表示からソースをあけてすべてコピーして、自分のに貼り付けていらないのを、消していくと残ったのがそれです。 eslsさんが言っているのは、大きい画像が１枚あり、小さな画像が１０枚あり、小さな画像にマウスを持っていけば大きな画像が変わるということですよね。 私はこれでしています。 <script language="JavaScript"><!-- function myChgPic(myPicURL){ document.images["myBigImage"].src = myPicURL; } // --></script> </HEAD> <BODY> <P align="center"><BR> </P> <CENTER> <TABLE bgcolor="#ffffff"> <TBODY> <TR> <TD align="center"> <TABLE cellpadding="10"> <TBODY> <TR> <TD> <DIV id="gallery"><img src="" name="myBigImage" width="480" height="360"></DIV> </TD> </TR> </TBODY> </TABLE> </TD> </TR> <TR> <TD> <CENTER> <TABLE cellpadding="5"> <TBODY> <TR> <TD a onmouseover="myChgPic('')" href="javascript:void(0)"><IMG src="" width="48" height="36"></TD> <TD a onmouseover="myChgPic('')" href="javascript:void(0)"><IMG src="" width="48" height="36"></TD> <TD a onmouseover="myChgPic('')" href="javascript:void(0)"><IMG src="" width="48" height="36"></TD> <TD a onmouseover="myChgPic('')" href="javascript:void(0)"><IMG src="" width="48" height="36"></TD> <TD a onmouseover="myChgPic('')" href="javascript:void(0)"><IMG src="" width="48" height="36"></TD> <TD a onmouseover="myChgPic('')" href="javascript:void(0)"><IMG src="" width="48" height="36"></TD> <TD a onmouseover="myChgPic('')" href="javascript:void(0)"><IMG src="" width="48" height="36"></TD> <TD a onmouseover="myChgPic('')" href="javascript:void(0)"><IMG src="" width="48" height="36"></TD> <TD a onmouseover="myChgPic('')" href="javascript:void(0)"><IMG src="" width="48" height="36"></TD> <TD a onmouseover="myChgPic('')" href="javascript:void(0)"><IMG src="" width="48" height="36"></TD> </TR> </TBODY> </TABLE> </CENTER> </TD> </TR> </TBODY> </TABLE> </CENTER> <CENTER></CENTER> </BODY> </HTML> 表の中に入ってるのでややこしいですがこんな感じです。 <DIV id="gallery"><img src="サーバに保存された画像の名前" name="myBigImage" width="480" height="360"></DIV> ページを開けたときに出てくる画像です。 <TD a onmouseover="myChgPic('サーバに保存された画像の名前')" href="javascript:void(0)"><IMG src="パソコンに保存された名前" width="48" height="36"></TD> 後は適当に増やしたり減らしたらいいです。 違ってたらごめんなさい。
関連するQ&A
- オンマウスでの画像＋テキスト表示
いつも的確な回答をいただいて、非常に感謝しております。 違うカテで同じような質問をさせていただいたのですが少しやりたいことが変わったので 再度、質問いたしました。 今、HPを作成しているのですがテーブルを左右（左を大きく、右を６つくらい）に分けて 右にはいくつか写真を小さく載せてその右の写真にマウスを乗せると左に大きく表示されるようにしたいのです。 そして、その大きな写真の下にはテキストも載せたいのです （マウスを乗せた写真によって違うテキストを載せる）。 ～こんなかんじ～ │￣￣│□□□ │＿＿│□□□ テキスト ～～～～～～～～ 検索ではビルダーを使った説明しかありません。 もし、フリーのHP作成ソフト（私が使っているのはalphaEDIT）でのやり方が乗っているサイト 無ければ、ご存知の方に教えていただきたいです。 よろしくお願いいたします。
- ベストアンサー
- ホームページ作成ソフト
- オンマウスでテキストを表示するためには
『http://tv.starcat.co.jp/channel/lineup/』のようにテキストの上にマウスを置いた時に飛び出すようにテキストを表示させたいと思っています。 今までは<font title="○○">のタグで代用していましたが、これだと表示された後、数秒で消えてしまうのでやはり不便に感じました。 上のサイトではテキスト上でマウスを移動させると、飛び出したテキストも一緒に動いてしまいますが、できることならこの飛び出すテキストを飛び出した位置で固定状態にし、テキスト、もしくは飛び出したテキストの上にマウスが乗っている間は飛び出すテキストが消えない状態したいと思います。 更にできることなら、その飛び出したテキストの中にリンクや画像（サムネイルサイズ）を付けられたら良いなと考えているんですが、これら全てを含めることは可能でしょうか？ 不可能であるなら、上のサイトのようにテキストを表示させる方法だけでも構いません。 このような方法を知っている方いらっしゃいましたらご教示をお願いします。
- ベストアンサー
- JavaScript
- Javascript/オンマウスで画像を変える
洋服のネットショップを作成中です。 一つのタイプで数色ある洋服（例えば、黒、白、赤、青の4種類）の場合、「Javascriptのオンマウスで画像を変えるhttp://www.aimix.jp/javascrip.html」を利用し、「黒」「白」「赤」「黒」と表示された部分にマウスをあてると、洋服の画像が変わるようにしたいと思っています。 この場合、そのページは画像1枚毎に重く(開く時間が長く)なっていくのでしょうか。 つまり、色が4色の場合と色が10色の場合とでは、表示されている画像は一枚ですが、開く時間は4画像分と10画像分の違いが発生するのでしょうか。 ご存知の方、教えていただければ幸いです。
- 締切済み
- ホームページ作成ソフト
- 画像とテキストの移動
画像とテキストを1セットにして（画像の下にテキストがある想定）、ある範囲の左から右に常に動かせつつ、マウスオーバーするとストップするようにさせたいのですが、JavaScriptでの実現方法を教えてください。 要件 ・上記の1セットはHTMLで設置 ・1セットのHTMLに対してのidの割り振りはしない ・10セットあるとして、流れていく過程で3セットずつ程度同時に見える想定 ・IE、FF、safari、Chrome、Operaで対応 ・移動はループさせる
- ベストアンサー
- JavaScript
- オンマウスで画像を表示〈フレーム版〉
すぐ下に質問されてる人と似ていますが、フレームバージョンではどうなのか、わからないので質問しました。 http://www.tagindex.com/javascript/link/change3.html フレームで上下に画面を分けて、上のリンク文字にマウスをあわせると、下の画面に画像を表示したいんです。 初心者なのであまりわからないんで。。。 よろしくお願いします。
- ベストアンサー
- JavaScript
- ライブドア 画像の表示について
パソコンからの投稿で、文章を書いて、途中に画像を入れて、その下にまた文章を書いた場合、携帯から見ると、画像のアイコンの下にたくさんスペースが出来てしまいます。 PCで投稿する際に、画像を貼り付け、そのすぐ横から文章を書くと、携帯では余分なスペースがなく表示されますが、パソコンから見た時にバランスが悪いです。 芸能人のブログを見てみると、PC,携帯、どっちも綺麗に余分なスペースなく表示されているのですが、どうすればこのようにできるのでしょうか？ ちなみに、ライブドアブログで、HTMLを使わずに書いています。
- ベストアンサー
- ブログ
- テキストにオンマウスで指定箇所に画像を表示
画像またはテキストリンクにオンマウスすると指定の場所にそれぞれのリンクで 指定の画像を表示するようにしたいのですが、色々調べてみたもののよくわかりませんでした。 リンク１にオンマウスして画像が出て、そのリンク１からマウスを放しても 別所に表示された画像はそのままで、次のリンク２にオンマウスすると 次の画像と入れ替わる、というようにしたいのですが・・・説明が下手ですみません＾＾； このようにしたい場合、どのようにしたらいいでしょうか。
- ベストアンサー
- JavaScript
- JavaScript オンマウスで画像切り替え、テキスト切り替え
javascriptで困っています。 あるテキストに一回のオンマウスで、 idを持った箇所の画像を切り替え、 また別のidをもった箇所にテキストを表示させたいのですがうまくいきません。 今までのコードはこちらです。 script -------------- function swap(n) { var items = [ { TextA:"あああ", ImageB:"../../common/logo.gif"}, { TextA:"２２２", ImageB:"../../common/logo.gif"}, { TextA:"３３３", ImageB:"../../common/logo.gif"} ]; var o = document.getElementById("Main"); $("Txt").innerText = items[n].TextA; $("Photo").src = items[n].ImageB; } html ---------- <div id="Main"> <img src="../logo.gif" alt="" name="Photo" width="120" height="60" id="Photo"> <div id="Txt" name="Txt">最初</div> </div> <A href="#" onmouseover="swap(0)">１</A><br> <A href="#" onmouseover="swap(1)">２</A><br> <A href="#" onmouseover="swap(2)">３</A> 詳しい方、どうぞご教授よろしくお願い致します。
- ベストアンサー
- JavaScript
- オンマウスでテキスト変化
オンマウスでテキスト表示でこまっておりまして、yamabejpさんの以前のソースをみつけ実効してみましたが 下記(\'文章を変更する\')の箇所の文章にＣＳＳで太字にしたり、マージンしたりしたいのですが どのように書き換えればできますでしょうか。。 初心者ですみません。<script language="javascript"> function textChange(id,text){ document.getElementById(id).innerText=text } </script> <img src="nodata" width="100" height="100" onMouseOver="textChange('text1','文章を変更する')"><br> <span id="text1">このへんに文書</span>
- 締切済み
- JavaScript
- 画像の上にマウスが乗ったときに、指定した場所にテキストを表示させる方法！
画像の上にマウスが乗っている時に、指定した別の場所に、任意のテキストを表示したいのですが、このようなことができるJavaScriptはあるのでしょうか？ 例えば、写真集のようなものを作るときに、その写真の上にマウスを合わせると、決まったところに、その説明文がテキストで表示されるようにしたいのです。 もしあるようであれば、ぜひ教えてください。
- ベストアンサー
- JavaScript
