• ベストアンサー

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

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

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

  • ベストアンサー
  • auty
  • ベストアンサー率58% (284/486)
回答No.1

「イメージの直表示」で考えてみました。 サイズ・その他は適当に調整します。 以下のコードを参考にしてみてください。 ------------------------------------------------------------ <html> <title>openwins</title> <script type="text/javascript"> <!-- function openWindow(img) { var scriptwin=window.open(img.src, '_blank', 'toolbar=no, location=no, resizable=yes, status=no, width=150, height=150'); } //--> </script> <body bgcolor="#fff8dc"> <h3>画像を開く</h3> <hr /> <img id="img1" onclick="openWindow(this)" width="100" src="images/1.jpg"/> <img onclick="document.getElementById('img1').src='images/b3.gif'" src="images/b3small.gif"/> <img onclick="document.getElementById('img1').src='images/b4.gif'" src="images/b4small.gif"/> </body> </html>

komham
質問者

お礼

auty様本当にありがとうございます!! 迅速な回答とても感謝です。 まさかこんなに早く回答して頂けるとは思っておりませんでした。 何と感謝すれば良いのかわかりませんがありがとうございました!!!

komham
質問者

補足

問題は一応解決できたのですが、 クライアントから『WindowをCloseするボタンと画像サイズに合わせてWindowが広がってが欲しい』との依頼がありました。 Javascriptによるページ生成のWindowに『Close』ボタンは このスクリプトに埋めることは可能なのでしょうか? 皆様のご指導の程宜しくお願い致します。

その他の回答 (1)

  • auty
  • ベストアンサー率58% (284/486)
回答No.2

・ IEと、Firefoxの違いを吸収するため次のように変更してください。 <html> <title>openwins</title> <script type="text/javascript"> <!-- var newwin; function openWindow(img) { var imgObj= new Image(); imgObj.src=img.src; var w=imgObj.width + 40; // 微調整 var h=imgObj.height + 40; // 微調整 var opt='toolbar=no, location=no, resizable=yes, status=no, width=' + w + ', height=' + h; newwin=window.open("", 'img', opt); newwin.document.write('<img src="' + img.src + '" />'); newwin.document.close(); } function closeWin() { if ( newwin && !newwin.closed ) { newwin.close(); } } //--> </script> <body bgcolor="#fff8dc"> <h3>画像を開く</h3> <hr /> <img id="img1" onclick="openWindow(this)" width="100" src="images/1.jpg"/> <img onclick="document.getElementById('img1').src='images/b3.gif'" src="images/b3small.gif"/> <img onclick="document.getElementById('img1').src='images/b4.gif'" src="images/b4small.gif"/> <hr /> <button onclick="closeWin();">ウィンドウを閉じる</button> </body> </html>

komham
質問者

お礼

とても迅速なご回答本当にありがとうございます!! まさか2度も回答頂けるなんて思っても居ませんでした。 auty様のような方が居て頂けてとても感謝しております。 本当に有難う御座いました。

関連するQ&A

  • サムネイルクリックで別ウィンドウに拡大画像表示

    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で小さくしています。 このような形は実現可能でしょうか? よろしくお願いします。

  • 拡大画像を別画面で表示したい

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

    • ベストアンサー
    • HTML
  • 画像をクリックしたら別ウインドウを開くようにするには?

    検索したり本を探したりしたのですが、どうしても見つけられなかったので 投稿します。 アルバムのコンテンツを作ろうと考えています。 いきなり大きな画像を沢山張りつけると重くて仕方がなくなるので、 まずサムネイルをテーブルの中にいれて沢山表示させるページを作りました。 自分の理想としてはサムネイルをクリックすると サイズ指定された別ウインドウが開いて該当サムネイルの大きな画像が 表示されるようにしたいんです。 そこで色々調べてみたのですが、ボタンや、テキストをクリックすると 別ウインドウが開くというサンプルはあっても、画像をクリックした 場合の設定方法が見つかりません。 どのように設定したらいいのか、ご存知の方がいらっしゃいましたら、 教えてください。よろしくお願いします。

  • 画像にサイズに合わせてウィンドウをリサイズ

    今回画像をクリックした場合別Windowで指定htmlを 表示させるページを作っています。そこで色々と調べたのですが 【ウィンドウに対して画像を拡大する】というのはありましたが、 画像の横幅を調べてウィンドウサイズを変更するスクリプトを 作成したいのですが、どうも無い様なのでご質問させて頂きました。 どなたかご指導の程宜しくお願い致します。

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

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

    • ベストアンサー
    • HTML
  • 画像をクリックすると別ウインドウに拡大画像を表示する。

    アパレルのショッピングサイトの運営をしております。クライアントから「自社デザインを真似たものや盗用したものを頻繁に見かけるようになったため右クリック禁止で商品写真の画像をコピーされないようにしたい」との依頼がありました。 右クリック禁止は気休め程度と説明しましたが、残念ながら理解を得られませんでした。 私のJava Scriptの知識は読むことができる程度です。浅薄な知識ではどうにもすることができず、こちらに投稿させていただきました。どうぞよろしくお願いいたします。 実現したい内容は、▼次のとおりです。 ┌─────    │商品画像  │A0101.jpg └───── ↓↓クリックで別ウインドウが開く ┏━━━━━━━━ ┃         ┃ 商品拡大画像  ┃ A0101L.jpg(末尾の'L'はLサイズの意味) ┃ ┃    ×閉じる ┗━━━━━━━━ 1.商品画像をクリック。ファイル名A0101.jpgを変数に記憶。 2.A0101.jpgの末尾に’L'を加える。(A0101L.jpg) 3.別ウインドウを開き、拡大画像を表示。 4.拡大画像の横幅を調べ、別ウインドウを、高さ(600px)、横幅( 拡大画像+左右余白10px)にリサイズ。 5.画像上での右クリック禁止(<IMG SRC="A0101L.jpg" oncontextmenu="alert('画像コピー禁止');return false;">) ▼イメージに近いサイト 「ノードストローム」 (商品画像の下、>LARGE VIEWをクリック) http://store.nordstrom.com/product/product_brandboutique.asp?styleid=2874130&boutique=lacoste&category=2376776~2374325~2378463~2383145~2378114&NextStyleID=2874128&PrevStyleID=none ▼現在はtarget="_blank"で別ウインドウを開かせています。 <A href="picture/A0101L.jpg" target="_blank"><IMG src="picture/A0101.jpg"></A>

  • クリックで画像切替、表示された画像から各ページへリンクする方法

    クリックで画像切替、表示された画像から各ページへリンクする方法 下記のような、左側の画像をクリックすると、右側の画像がクリックした画像に切り替わり、 切り替わった右側の画像からそれぞれ関連ページへリンクをつけたいと思っています。 ■何もしていない状態↓ 画像1 画像2 画像3  画像A(画像1) 画像4 画像5 ■左側の画像2をクリックした場合↓ 中央の画像Aの部分に画像2を表示 表示された画像A(画像2)をクリックすると関連ページへリンク 画像1 画像2 画像3  画像A(画像2) 画像4 画像5 画像の切り替えは色々調べると出てきたのですが、それぞれ切り替えた画像からのリンクの やり方がどうしてもわかりませんでした。 初心者なので、部分的ではなく一式書き方をお教えいただけましたら幸いです。 よろしくお願いいたします。

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

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

  • 別ウインドウが開かない

    画面のURLなどにクリックして別ウインドウを開こうとしても、 何の反応もしなくなりました。 前のページが消えて、新しいページに塗り変わるタイプのものは、 何の問題もなく出来るのですが…。 別ウインドウものは、右クリック→「新しいウインドウで開く」 にも反応がなく、今、何も開けません。 過去ログを見て、インターネットオプション→一時ファイル削除 …というのをやってみましたが、変わりませんでした。 どなたか分かる方いらっしゃいましたら、助けてください。 よろしくお願いします。

  • タスクバーに表示されるウィンドウについて

    初歩的な質問ですみません。 タスクバーの表示についてですが、複数のウィンドウを開いていくと、スタートボタン横のタスクバーに次々と最小化されたウィンドウが増えていきます。 その表示についてですが、今まで左側から順にウィンドウが最小表示されていたものが、タスクバーの空きスペース右側からウィンドウが表示されるようになりました。 更に3つ以上ウィンドウが増えると、右側に上下キーが表示され、クリックで選ぶようになってしまいました。 とても使いづらいのですが、直し方が分からないので、ご指導願います。