- ベストアンサー
サムネイルにマウスで画像表示
HTML勉強中の者です。 5つのサムネイルにマウスをのせると、同一ページの同じ場所（1箇所）にそれぞれの画像を表示させ、マウスが離れると表示を消す方法---(1) とそのまま表示する方法---(2)を教えてください。 （HTMLで可能であればその方が良いのですが、自分が勉強した範囲ではできません。別HTMLリンクならわかりますが・・・） Javascriptなら可能でしょうか？ よろしくお願いいたします。
- epon
- お礼率72% (29/40)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
サンプルを作ってみました。 <script type="text/javascript"> <!-- //あらかじめイメージを読み込んでおく var imgs = new Array; var i; for(i=1;i<=3;i++){ imgs[i] = new Image(); imgs[i].src = i.toString() + ".gif"; } function disp(imgNo){ document.getElementById("DISP_IMG").src=imgs[imgNo].src; } function restore(){ document.getElementById("DISP_IMG").src="Blank.gif"; } //--> </script> </head> <body> <img src="1.jpg" onmouseover="disp(1)" onmouseout="restore()"> <img src="2.jpg" onmouseover="disp(2)" onmouseout="restore()"> <img src="3.jpg" onmouseover="disp(3)" onmouseout="restore()"> <hr> <img ID="DISP_IMG" src="Blank.gif"> ---------------------------------------- ファイル名の扱いを簡単にするために数字にしていますが、本来、対応がとれれば普通のファイル名で良いです。 あらかじめイメージを読み込んでおく処理は、別に無くても良いですが、画像の大きさで表示の切り替えに時間がかかるので、あらかじめ読み込んでいます。 (2)マウスが離れてもそのまま表示する場合は、onmouseoverの部分を単に削除すればいいです。
その他の回答 (1)
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
#1の(2)で onmouseoverを削除するは、 onmouseoutを削除するの間違いです。
補足
BLUEPIXYさま 大変遅くなってしまいましたが、ご回答ありがとうございました。 参考にさせていただきます。