- ベストアンサー
色々な画像を指定の場所に表示したい
- サークルのホームページで写真のページを作りたいが、表示方法が分からない。
- 理想的なページは、サムネイル画像をクリックすると同じ場所に写真が表示される方法。
- HTMLではフレームで作ろうとしたが、同一ページで写真を変えて表示する方法がわからない。
- sky-diva
- お礼率60% (25/41)
- レンタルサーバ・ASP
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
javascriptを使用すればページ移動もなく理想なものが実現できます ■■HTMLの<head></head>内に以下を記述■■ <!-- ここから // --> <script type="text/javascript"> <!-- function change(src,msg){ document.getElementById("pict").innerHTML = '<img src="' + src + '">'; document.getElementById("msg").innerHTML = msg; } // --> </script> <!-- ここまで / --> ■■以下は<body></body>内の任意の場所に記述■■ ■理想ページの上部部分、各サムネイルの記述（実際は画像分用意） <a onclick="change('△画像のURLパス△','▲コメント▲')" style="cursor:pointer">▽画像サムネイル▽</a> △変更する部分 onclickの後にある下記の△と▲、▽部分です ■画像を表示したい箇所に以下を記述（１つだけ） <span id="pict"></span> △説明 このspanの中に画像が表示されます 最初から何か画像等を表示したい場合は上記<span>内に記述しても大丈夫です ■説明を表示したい箇所に以下を記述（１つだけ） <span id="msg"></span> △説明 このspanの中にコメントが表示されます 最初から何かコメント等を表示したい場合は上記<span>内に記述しても大丈夫です ■■記述例■■ <html> <head> <script type="text/javascript"> <!-- function change(src,msg){ document.getElementById("pict").innerHTML = '<img src="' + src + '">'; document.getElementById("msg").innerHTML = msg; } // --> </script> </head> <body> <div> <a onclick="change('00.gif','全員の写真です')" style="cursor:pointer"><img src="00.gif"></a> <a onclick="change('01.gif','○○君')" style="cursor:pointer"><img src="01.gif"></a> <a onclick="change('02.gif','○○さん')" style="cursor:pointer"><img src="02.gif"></a> </div> <div><span id="pict">ここに写真が表示されるよ</span></div> <div><span id="msg">ここにコメントが出るよ</span></div> </body> </html> ■■注意■■ ・idをspan以外のタグに付けるのは可能ですが、重複して使わないこと ・change()内の画像パスとコメントは必ず「'」で囲まれていて、「,」で区切られている形にする ・change()内で区切り以外の「'」や「"」は使わないこと ■■最後に■■ 記述内容は最小限で書いていますので、後はご自分でカスタマイズしてください また、今回はとりあえず理想の内容を実現させるためのものなので、javascriptに関する説明は省いています 細かい内容まで知りたい場合は、javascript内で使われている単語を検索にかけるとかなり出てきますので、そちらで勉強するのをおすすめします
その他の回答 (2)
- touro
- ベストアンサー率72% (16/22)
フレームを使って、target属性でリンク先を別フレームに表示するように指定すれば同じようなページは作れると思いますが…。 参考URLをご覧ください。
補足
作ってみたページでは、まずフレームで上下に分け、下にはサムネイル、そしてそのサムネイル画像をクリックすると上のフレームに大きな写真がでるようになってます。 しかし、 <a href="IMGP2100.JPG" target="ue"><img src="IMGP2100.JPG"></a> という記述で、写真そのものにリンクしているので、写真を真ん中に表示したりコメントをつけたりすることができません。 フレームを使った場合、１枚の写真につき、１つのhtmlファイルを作らないと、真ん中に表示したりコメントをつけたりできないのでしょうか？
- kentkun
- ベストアンサー率35% (1106/3092)
cgiを使用しないとこういうページは無理です。 参考ＵＲＬにこの album.cgi の入手および解説ページありますので参考にしてください。 cgiは、やってみると案外簡単ですよ
お礼
参考URLを見てみたのですが、理想の形の写真ページがありませんでした。（もしかしたら、リンク切れのページにあったのかも・・・？） ちょっとこのページだけでは理解ができなかったので、もう少し他のcgi解説ページを探してみることにします。
お礼
回答ありがとうございます。 まさにこれです！ javaも普段はコピペだけで、自分では全くわからないので、このようにスクリプトを書いてくださって助かりました！ とりあえず作ってみたらこの先自分でカスタマイズできそうなので、やってみたいと思います。