- 締切済み
javascript/画像複数表示について
初めまして。 javascriptは何も知らないのですが、 業務で必要となり、困っております。 どなたかご教示下さい。 ■動かない 下記※の記述をしたのですが、 一つだけだと動くのですが、複数同じものを何個もhtml内に記述すると、 動作しません。 察するにファイル名等の指定が必要なのかな… なんて思うのですが、その方法がわかりません。 WEBサイト内でサムネイルをクリックすると、 大きな画像が選定するファイル毎に切り替えるスクリプトです。 ■現状の記述内容 <html> <head> <title></title> <script type="text/javascript"> <!-- function Imgche(ado) { document.space.src=ado; } // --> </script> </head> <body> <center> <p style="border: ridge 10 #cccc66; width: 300; height: 300; background-color: #cccc66; "> <p> <img src="小さな画像ファイル名1" onClick="Imgche('大きな画像ファイル名1')"> <img src="小さな画像ファイル名2" onClick="Imgche('大きな画像ファイル名2')"> <img src="小さな画像ファイル名3" onClick="Imgche('大きな画像ファイル名3')"> </p> <img src="最初に表示されている画像" width="300" height="300" name="space"> </p> </center> <center> <p style="border: ridge 10 #cccc66; width: 300; height: 300; background-color: #cccc66; "> <p> <img src="小さな画像ファイル名1" onClick="Imgche('大きな画像ファイル名1')"> <img src="小さな画像ファイル名2" onClick="Imgche('大きな画像ファイル名2')"> <img src="小さな画像ファイル名3" onClick="Imgche('大きな画像ファイル名3')"> </p> <img src="最初に表示されている画像" width="300" height="300" name="space"> </p> </center> <center> <p style="border: ridge 10 #cccc66; width: 300; height: 300; background-color: #cccc66; "> <p> <img src="小さな画像ファイル名1" onClick="Imgche('大きな画像ファイル名1')"> <img src="小さな画像ファイル名2" onClick="Imgche('大きな画像ファイル名2')"> <img src="小さな画像ファイル名3" onClick="Imgche('大きな画像ファイル名3')"> </p> <img src="最初に表示されている画像" width="300" height="300" name="space"> </p> </center> </body> </html>
- みんなの回答 (1)
- 専門家の回答
みんなの回答
画像を切り替える際にその場所を指定しているのが、トップに出てくるスクリプトの document.space.src=ado; "space"に当たります。 で、"space"がどこか、といえば、上記ソースでは、3カ所あるからうまくいかないのでしょう。 それぞれ、"最初に表示されている画像"の場所の、name="space"で指定しているところです。 これ以上書くと、ソースそのままのせることに鳴りますので、あとはがんばって完成させていただければと。