• ベストアンサー

沢山の写真画像を1枚ずつ指定した別ウインドウで表示するには?

こんにちは。 ホームページでで膨大な量の写真を紹介したいと思っています。 こんな感じで作りたいと思っています。 ○1ページに紹介する写真の縮小版を並べる。 ○縮小した写真をクリックすると、解説つきの拡大写真が別ウィンドウで表示される。 ただ拡大写真を別ウィンドウでっていうのは簡単なのですが、 解説の文字列が入り、そのウィンドウの背景や、枠組みなんかもきちんと作りたいのです。 写真は膨大な量なので、1枚1枚htmlファイルを作るのは避けたいです。 ですので、 最初に写真が拡大で表示される用のhtmlのファイルを写真抜きで作り、 別ページの縮小された写真をクリックすると、 その拡大版があらかじめ作っておいたウィンドウで自動的に解説付きで表示されるふうなシステムは作れないでしょうか? これってhtmlではないかもしれないのですが…。 ご存知の方、どうか教えてください。

  • konoe
  • お礼率97% (303/312)
  • HTML
  • 回答数3
  • ありがとう数3

質問者が選んだベストアンサー

  • ベストアンサー
  • chie65536
  • ベストアンサー率41% (2512/6032)
回答No.1

CGIでスクリプトを書きましょう。 例えば、viewpicture.cgiと言うスクリプトを組み、サムネイルページで <a target="imgview" href="./cgi-bin/viewpicture.cgi?no=001><img src="./images/thumb001.jpg"></a> <a target="imgview" href="./cgi-bin/viewpicture.cgi?no=002><img src="./images/thumb002.jpg"></a> <a target="imgview" href="./cgi-bin/viewpicture.cgi?no=003><img src="./images/thumb003.jpg"></a><br> と書いておきます。 サムネイルページで画像をクリックするとviewpicture.cgiが「no=番号」と言うパラメータ付きで呼ばれます。 viewpicture.cgiでは、パラメータを解析して「no=」の後ろの番号を取り出し、その番号に対応した画像埋め込みタグと解説文が書かれた「html文書」を出力します。 CGIからの出力を受け取ったブラウザは、それが普通のhtml文書だと思い、画像と文書を表示します。

konoe
質問者

お礼

chie65536さんありがとうございます。 CGIですかっっ。 全く知識がないのです。 CGIの書き方のページを今探しています。 まずスクリプトを組んでから、HTMLを書く…のですよね? むむむ…勉強してみます。 chie65536さんの教えてくださったやり方は私の求めていることができるやり方だと思います。 私に知識があればなぁ・・・・!!!

その他の回答 (2)

回答No.3

知識を付けるか、手間を掛けるか、お金をかけるか・・・。 まぁ JavaScript は閲覧者の環境に左右されるデメリットがありながら知識も必要なので論外として CGI だろうが手作業だろうが外注だろうが 閲覧側はは出来上がりの HTML を見るだけなので 単純作業に手間を掛けるか 知識を付ける事に手間を掛けるか お金をかけるかの選択です。 他にも HTML 作成ツールを自作するというのも(別に汎用でなくても良いので)それ程難しくはないですよ。 私の感想としては、写真や解説をデータとして意識するのなら CGI を学んではいかがかと。 それから気を付けなければいけないのは、 どんなに自動化出来たとしても 写真と解説の紐つけ情報は必ず必要です。 この為の作業は回避不可能です。 となると、その為の作業と知識,個々に手作業で行うのと 果たしてどれ程の差があるのかも・・・。

konoe
質問者

お礼

koutarou504さんありがとうございます。 ぬぬぅ、簡単にはできないってことですね。 >閲覧側はは出来上がりの HTML を見るだけなので そのとおりなんですよね~。 でも私としてはすっきりまとめたい(><) 楽な回避方法ならあるんですけど、やっぱりすっきりしない。 色々検討してみます。

  • gura_
  • ベストアンサー率44% (749/1683)
回答No.2

 「サムネイルを挿入する方法」ではだめなんですか。 それなりのソフトが必要ですが↓ http://www-6.ibm.com/jp/domino01/swhc/esupport.nsf/all/hpb0957

参考URL:
http://www-6.ibm.com/jp/domino01/swhc/esupport.nsf/all/hpb0957
konoe
質問者

お礼

gura_ さんありがとうございます。 はい、サムネイルのページはもうすでにできているんです。 写真を拡大して、ポップアップする方法も知っています。 そのポップアップされたウィンドウを装飾(?)して、さらに解説もつけたいんです。 大量の写真を、いちいちHTML化してられないので、一括してできる方法はないのかと質問しました。 gura_ さんと私の考えが食い違っていたらすみません…。 何かよい方法はないものですかねぇ…。 #1の方法が1番なんでしょうかね…。

関連するQ&A

  • 画像クリックした後別ウィンドウで表示

    過去の質問を調べてみましたが無かったのでご質問させて頂きます。 とあるページに小さい画像が右に並んでいて、左に大きい画像がある ページがあります。 その右側の小さい画像をクリックすると左側の画像が小さい画像の拡大版が 表示されます。 ここまでは過去ログにありましたが、その左側の画像をクリックすると 別ウィンドウでそのクリック後に変わった画像が表示したいのです。 別ウィンドウはhtml表示でなくてもイメージの直表示でOKなのですが 説明足らずでわかりにくい点等ございますが、ご指導頂ければ幸いです。 宜しくお願い致します。

  • ファイルに表示される縮小版の写真と実際の写真が違う

    マイピクチャから入って、ファイルの中に縮小版として表示される写真と、実際その写真をクリックしてWindows画像とFAXビューアで表示される写真が違います。 ファイルに表示される縮小版の写真がバラバラになってておかしいです。前までは正しく表示されてました。 どうしたら元に戻るでしょうか?

  • Dreamweaverのリンクを別ウインドウで表示

    DeamweaverMX2004を使用しています。 写真をクリックするとその拡大写真が別のウインドウが出て、それに表示されるということをしたいのですが、方法がわかりません。 普通にリンクを張ると、同じウインドウに拡大写真が表示されてしまいます。 よろしくお願いします。

  • GoLiveCS クリックで写真だけ拡大表示させたい

    GoLiveCS 初心者です。 サイト上の小さな写真を、クリックで「写真だけ拡大表示」をさせたいのですがやり方が分かりません。クリックをすると別の新ウィンドウが開き写真の拡大画像を表示、メニューバーやツールバーは表示されないようにしたいです。一度この新ウィンドウを開くと、元ページの他の拡大させたい写真も同じ新ウィンドウ内につづけて表示できるとなお良いです。

  • 表示されたJPEG画像を拡大縮小した際のディザ(ピクセルのギザギザ)処理

    撮り貯めた写真を紹介するサイトをFLASHで作ろうと頑張ってます。 サイトでは、あらかじめ各写真のサムネイルをある程度の量表示しておき、 サイトの訪問者がどれかサムネイルをクリックした後、 準備しておいた大きな写真(JPEG画像)をウィンドウいっぱいに表示しようとしています。 しかし、見る人の画面の大きさによって表示されるJPEG画像が準備しておいたサイズから拡大縮小されるため、 どうしてもディザが現れてきてしまいます。 いろいろなサイトを探ってみたのですが、 FLASHの中で表示されたJPEG画像の拡大縮小時のディザは仕方ないとの結果が大半でした。 唯一http://fotologue.jp/のサイトで表示された写真は、 ウィンドウを拡大縮小した場合でもディザを無くす処理が行われているようなのですが、 これはいったいどのように処理されているのでしょうか? どなたかおわかりになる方教えていただきたいです。 宜しくお願いします。

  • リンク画像を別ウインドウで開きたい

    gooブログ無料版の”カスタム用テンプレート”を使用しています。 サムネイルをクリックした時に、別ウインドウで拡大画像を表示したいのですが、CSSで記述する事は可能でしょうか。

  • HPの画像の拡大表示について  

    現在HPを作成しています。 小さい画像を並べて、クリックすると新しいウインドウに 拡大写真が表示されるようにしたいのですが。 winのペイントで画像を2枚用意して、(縮小画像と拡大画像) 01と1にファイルしました。 <A href="img\1.jpg" target="_blank"><IMG src="img\01.jpgL"></A>  としたのですが、拡大画像は表示されても、縮小画像は×になっています。何か間違っているのでしょうか?  教えてくださいお願いします。 超初心者ですので、わかり易くお願いします。

    • ベストアンサー
    • HTML
  • 拡大画像を別画面で表示したい

    メインのページにある画像をクリックすると別ウィンドウで拡大画像を表示したいのですが、うまく出来ません。 下記の方法のタグを教えていただけますでしょうか。 1.拡大画像のウィンドウのサイズは画像に合わせた  適当な大きさに指定したい。 2.開いたウィンドウを【閉じる】ボタンの作成 (テキストで「閉じる」と表示する予定です) 宜しくお願いいたします。

    • ベストアンサー
    • HTML
  • サムネイルクリックで別ウィンドウに拡大画像表示

    javascriptにて画像のようなな形を作りたいのですが初心者で困っています。 ページAの画像をクリックすると別ウィンドウで拡大画像とその他のサムネイルが 表示され、そのウィンドウで各画像を切り替えて観覧できるようにしたいです。 元のページでの画像切替はよくありますが、別ページを開いて観覧する場合がわからず困っています。ページAと同じようなページを複数つくり、拡大のページBは共通で使えるようにしたいと思っています。 ページAのhtml部分は <li><a href=><img src="test.jpg" title="拡大時に表示する文"></a></li> <li><a href=><img src="test_a.jpg" title="拡大時に表示する文"></a></li> <li><a href=><img src="test_b.jpg" title="拡大時に表示する文"></a></li> この画像をクリックでページB拡大画像を表示し、画像と一緒にtitleに入れた文章を表示させたいと思っています。 用意する画像は各拡大画像1枚で、サムネイルのところはcssで小さくしています。 このような形は実現可能でしょうか? よろしくお願いします。

  • jsファイルを使って、複数の写真を一つのhtmlファイルで表示

    jsファイルを使い、一つのhtmlファイルで写真表示をサムネイル式に表示して、クリックしたらもう一つのhtmlファイルで拡大版を表示して、その写真画面をクリックしたら再度サムネイルのページに戻れるようなスクリプトを無料配布している所をご存知ありませんでしょうか。 なんどか自分でやってはみたけど、どうしても上手く行きませんでした。よろしくお願いします。

専門家に質問してみよう