- 締切済み
Javascriptについての質問
下の図のように、画像にマウスをポイントすると、下に画像と説明が表示されるようにしたいのですが、画像を大きく表示させることは、出来たのですが、説明の入れ方がわからないのです。 こちらのページも参考にさせて頂いたのですが、イメージ通りにいきませんでした。 http://netneko.jp/homepage/gazoumsg.html http://www16.big.or.jp/~ogura1/java_scr/Photo_mess/Photo_mess.html わかる方がいたら、解答よろしくお願いします。 画像１ 画像２ 画像３ 画像４ 大きく画像を表示 説明文を表示
- tomy26
- お礼率40% (4/10)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
2番目の参考サイトが、ほとんどご質問通りになっていると思うのですが…？ それなので、ちょっと方法を変えた例を… あらかじめ表示する内容をHTML内にセットしておいて、スクリプトではそれをコピーするだけというもの。 <ul id="imageList">内に画像と<div class="caption">をリスト形式で並べておいて、マウスオンしたら内容をコピー。 CSS等は適当に調整してください。 （全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> #imageList { list-style-type:none; margin:0; padding:0; } #imageList li { float:left; margin-right:10px; } #imageList li img { width:100px; height:50px; } #imageList li .caption { display:none; } #largeImage { width:430px; heigth:215px; } #caption { width:430px; margin-top:1em; border:1px solid blue; } </style> <script type="text/javascript"> <!-- function change(evt){ var d, div, t = evt.target || evt.srcElement; if(t.nodeName != "IMG" || t.parentNode.nodeName != "LI") return; d = t.nextSibling; while(d && d.className != "caption") d = d.nextSibling; document.getElementById("largeImage").src = t.src; if(d){ div = document.getElementById("caption"); while(div.firstChild) div.removeChild(div.firstChild); div.appendChild(d.cloneNode(true)); } } //--> </script> </head> <body> <ul id="imageList" onmouseover="change(event)"> <li><img src="A.jpg" alt="画像1"> <div class="caption">画像1の説明</div></li> <li><img src="B.jpg" alt="画像2"> <div class="caption">画像2の説明</div></li> <li><img src="C.jpg" alt="画像3"> <div class="caption">画像3の説明</div></li> <li><img src="D.jpg" alt="画像4"> <div class="caption">画像4の説明</div></li> </ul> <div style="clear:both;"> <p><img id="largeImage" src="A.jpg" alt="large_image"> <div id="caption"> </div> </div> </body> </html>
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_2_thumbnail_img_sm.png)
補足
このように、作ってみたのですが、これに具体的にどのように書けば説明が表示されるのでしょうか？初心者でよく理解していないので、詳しく書いていただけると、助かります。 よろしくお願いします。 <p><img src="画像1" alt="" width="96" height="72" onmouseover="document.bigsora.src='画像1'"> <img src="画像２.jpg" alt="" width="96" height="72" onmouseover="document.bigsora.src='画像2'"> <img src="画像３.jpg" alt="" width="96" height="72" onmouseover="document.bigsora.src='画像３.jpg'"> <img src="画像４.jpg" alt="" width="96" height="72" onmouseover="document.bigsora.src='画像.jpg'"><br> <img src="images1/image2.jpg" alt="" width="400" height="300" name="bigsora"><br> </p> </DIV>