色々な画像を指定の場所に表示したい
- サークルのホームページで写真のページを作りたいが、表示方法が分からない。
- 理想的なページは、サムネイル画像をクリックすると同じ場所に写真が表示される方法。
- HTMLではフレームで作ろうとしたが、同一ページで写真を変えて表示する方法がわからない。
- ベストアンサー
色々な画像を指定の場所に表示したい
今、サークルのホームページを作っていて、 写真のページを作成しています。 今までの表示方法とは変えて作りたいと思っているのですが、やり方がわからないので困っています。 理想に近いページはこれです↓ http://seirei.ath.cx/youngtc/cgi-bin/album/album.cgi?mode=main&action=view&no=194&photono=1&tailno=.jpg&wno=480&hno=269 （URLが長くてすみません。） サムネイル画像をクリックすると、同じ場所に写真が表示されます。 cgiを使っているようですが、cgiは詳しくはわかりません。 htmlならわかるのでフレームで作ろうとしたのですが、 同一ページで写真だけ変えて表示する方法がわかりません。 どなたかこんな感じにできる方法をご教授ください。 ちなみに、現在HPはソフト等使わずに作っています。
- 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% (1107/3093)
cgiを使用しないとこういうページは無理です。 参考ＵＲＬにこの album.cgi の入手および解説ページありますので参考にしてください。 cgiは、やってみると案外簡単ですよ
お礼
参考URLを見てみたのですが、理想の形の写真ページがありませんでした。（もしかしたら、リンク切れのページにあったのかも・・・？） ちょっとこのページだけでは理解ができなかったので、もう少し他のcgi解説ページを探してみることにします。
関連するQ&A
- 画像クリックで別の場所の画像を変更
まずは、こちらのサイトを見ていただけるでしょうか? http://www.rocomotion.jp/cgi/sample/ralbum/ralbum.cgi?mode=main&action=view&no=427&photono=1&tailno=.jpg&wno=181&hno=163 このサイトのように「クリックすることで、拡大写真を表示」させたいです。 ただ、このサイトの場合、CGIを利用していますが、JavaScript 等を利用してhtmlファイル上で実現できないか?と考えています。 このようなことがJavaScriptで実現可能でしょうか? ちなみに画像は最大10枚です。絶対10枚と言うものではないです。 方法を教えてください。お願いします。
- ベストアンサー
- JavaScript
- サムネイルについて
サムネイルをクリックすると、大きい商品画像＆説明文を表示させたいのですが、どうすればいいのでしょうか？ 説明文はテキストフィールドで収まるようなものでなく、テーブルを使って詳しい商品説明をし、レイアウトしたいのですが…。 ↓このページの表示がイメージに近いです。 http://www.chimudon.com/home/gallery/gallery.cgi?mode=main&action=view&no=11&photono=1&tailno=.jpg&wno=363&hno=282
- ベストアンサー
- JavaScript
- 配列からURLを抜き出し表示する方法
画像をWEB上で管理するためのCGIを作っていますが 配列からURLを抜き出しHTMLにて表示させる良い方法が分かりません 目指しているのは 1.CGIで表示されたサムネイルを押すとmainのFrameに写真が表示される 2.サムネイルの数が一定数（例えば10）を超えると サムネイル表示部分の横にNEXTページの表示ができる 3.mainで出力される画像はある程度のレイアウトを作れる 宜しくご教授お願い致します 作ったCGIをのせると800文字以上と受け付けてくれませんので返答？に載せます。
- 締切済み
- CGI
- 表示する画像をファイル名を受け渡すには？
始めまして。buroboと申します。 早速ですが下記について分かりましたら教えて下さい。 アルバム作成をしており1ページに2つのアイフレームがあります。左にはサムネイル用のmenu.htm、右には写真表示用のphot.htmを読み込んでいます。 phot.htmの<IMG SRC="001.jpg" border="0">の001.jpgをサムネイルをクリックした時に自動で変更するにはどうしたらよいでしょうか？ phot.htm 1枚で数百枚の写真を表示できるように作りたいと思っています。 よろしくお願いします。
- ベストアンサー
- JavaScript
- KENT WEBさんのcgi パスワード制限
いつもお世話になっております。 今回はcgiの設置について、ご指導お願いします。 KENT WEB さんのcgiでパスワード制限の「簡易タイプ(LOG IN)」をどうにか設置できたのですが、ログイン画面から隠しファイルまで一応表示されるものの、隠しファイルがサムネイル画面で、そこから写真をクリックしたら大きな写真が表示されるという風にしたいと思っているのですが、隠しファイルのサムネイルの写真が×で表示されていないことと、リンクをクリックしても大きな写真が表示されずにいます。サムネイルの写真や大きな写真をアップするホルダが違うと思い、わからないままあちこちにアップして試してみたのですが、やはり表示されません。cgiについて、何の知識もないまま設置して、行き詰ってしまいました。 隠しファイルのURLは http://＊＊＊＊＊＊＊＊/cgi-bin/login.cgi で サムネイルをクリックした際のURLは http:// ＊＊＊＊＊＊＊＊/cgi-bin/ga/＊＊＊＊＊.html となっています。 どうか、ご指導のほど宜しくお願い致します。
- ベストアンサー
- CGI
- サムネイルをマウスオーバーで、所定の場所に大きな画像を表示したい
↓ここのページを参考にアルバムのページを作ってます。 http://www14.plala.or.jp/sugachuu/JavaScript/k06.html で、一番上にタイトルいれたかったのでタイトル画像を置いたらおかしくなり サムネイルにマウスを持ってくとタイトル画像のスペースに 拡大画像が表示されるようになってしまいました。。 タイトルは上記ページのソースの<body>タグのはじめに貼り付けました。 正しく表示させるためにはどのようにしたら良いでしょうか？ また、これとは違った方法がありましたらぜひ教えてください><
- ベストアンサー
- JavaScript
- Google Chromeのサムネールビュー（8コマの）が突然、表示さ
Google Chromeのサムネールビュー（8コマの）が突然、表示されなくなってしまいました。 今までみていたサムネールビューのページが「よくアクセスするページ」をクリックするとまとめて 四角いフレームの中にページが文字のみで表示されているだけです。もちろんそこでクリックすればそのページは開きますが、Google Chromeは現在白紙状態で上部の検索枠とブックマークの行と下部に「よくアクセスするページ」と「最近閉じたタブ」の表示のみです。基の状態、サムネールビューが表示されるようにしたいのですが、その方法を誰かおしえてください。宜しくお願いいたします。
- 締切済み
- ネットトラブル
- IP表示されない理由！！！
http://globe.musical.to/cgi-bin/room1/mainroom.cgi?mode=nozoki ここのチャットに入室するときにIPが表示されるんですが、入室したときに表示されないひともいます。 これってどういうことなんでしょう。。。
- 締切済み
- Windows XP
- SSIで表示させるときの各ファイルのパス
SSIで日記をトップページに表示させようとしています。 CGIは./cgi-bin/day/に保存してます。 トップでSSI表示(<!--#exec cmd="cgi-bin/day/day.cgi" -->)させるためには各ファイルもそこからのパスが必要ですよね。 (require './cgi-bin/day/jcode.pl';) しかし、こうすると記事を入力するときにエラーが出てしまいます。 (./cgi-bin/day/day.cgiから見るとjcode.plは./cgi-bin/day/cgi-bin/day/の場所になってしまう。その他datファイルも同じ) これを解消する何か良い方法は無いでしょうか? 例えば、「cgi-bin/day/」の位置に指定ファイルが無ければ「./」の位置を探すとか、SSI表示部分は切り離して別ファイルにするとか… 良い方法があったら教えてください。
- ベストアンサー
- CGI
- フォルダ内の画像を（HTML）でサムネイル画像表示する方法
http://aaa.com/img/ のimgフォルダの中に写真がたくさんあります。 毎日増えており、名前もバラバラです。 .htaccess で内容は表示されるように設定してあります。 これをサムネイルで表示して、クリックしたらその画像が現寸大で表示されるような方法はないものでしょうか？ JAVA PHP CGI などのサンプルプログラムを捜しています。 よろしくお願いします。
- ベストアンサー
- HTML
お礼
回答ありがとうございます。 まさにこれです！ javaも普段はコピペだけで、自分では全くわからないので、このようにスクリプトを書いてくださって助かりました！ とりあえず作ってみたらこの先自分でカスタマイズできそうなので、やってみたいと思います。