- 締切済み
画像をオンマウスして表示テキストを変える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> 後は適当に増やしたり減らしたらいいです。 違ってたらごめんなさい。
