• ベストアンサー

小窓について教えて下さい。

小さい画像をクリックで、 大きな画像を小窓で見れるようにしたいのですが、 大きな画像のサイズが全部バラバラなのです。 (画像は合計8コあります) 通常は下記URLで小窓を出しているのですが、 画像のサイズがバラバラの場合、 8コのJavaScriptを書き込まなければいけないのでしょうか? もし他に方法がありましたら、教えて下さい。 http://oshiete1.goo.ne.jp/kotaeru.php3?q=568520 説明が分かりづらくて申し訳ありませんが、 宜しくお願い致します。

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

  • ベストアンサー
noname#199778
noname#199778
回答No.2

おはようございます。 スクリプトを個別に8個用意する必要はありません。 関数を工夫してやれば、リーズナブルに記述できます。 具体的には、関数に渡す引数を追加して、関数にウィンドウサイズの指定を引き渡してやればよいと思います。 以前提示したスクリプトの前者の方を改造するのであれば、head内は <script type="text/javascript"><!-- function subwin(imgsrc,imgalt,xx,yy){ sub1=window.open("","_blank","width="+xx+",height="+yy+",resizable=1"); sub1.document.open(); sub1.document.write("<html><head><title>"+imgalt+"</title></head>"); sub1.document.write("<body style='margin: 0;'>") sub1.document.write("<img src='"+imgsrc+"' alt='"+imgalt+"' width='"+xx+"' height='"+yy+"'>"); sub1.document.write("</body></html>"); sub1.document.close(); } //--></script> 関数の呼び出し部は、 <a href="#" onClick="subwin('画像ファイルのURL','画像ファイルの説明',小窓の横幅,小窓の縦幅); return false;"><img src="p_1.jpg" border="0" width="70" height="48"></a> とすればよいでしょう。 上記のケースでは、内容として表示される画像も小窓のウィンドウサイズいっぱいになるように指定してあります。 画像を表示するHTMLファイルを別に用意してあるケースで、小窓を指定したサイズで開きたいのであれば(前質問の後者の例を改造するなら)、 <script type="text/javascript"><!-- function subwin(file,xx,yy){ window.open(file,"_blank","width="+xx+",height="+yy+",resizable=1"); } //--></script> 上記をhead内に、関数の呼び出し部は <a href="#" onClick="subwin('読み出すHTMLファイルのURL',小窓の横幅,小窓の縦幅); return false;"><img src="p_1.jpg" border="0" width="70" height="48"></a> このような形に直せば、関数を呼び出す側で開く小窓のサイズを指定・制御できます。 こんな感じではいかがでしょうか?

keikaiga
質問者

お礼

前回も今回も、大変分かりやすく、詳しく教えていただき、ありがとうございました。 大変感謝しております。 再度質問をするかとも思いますが、 また宜しくお願い致します。 この方法で、一度やってみます。 ありがとうございました。

keikaiga
質問者

補足

またまた出来ました!! ありがとうございました♪

その他の回答 (1)

  • the845t
  • ベストアンサー率33% (246/743)
回答No.1

>画像のサイズがバラバラの場合、 >8コのJavaScriptを書き込まなければいけないのでしょうか? そんなことはありません。一番簡単なのは、画像サイズを統一するか、 現在のウィンドウサイズに収まる形に画像サイズを変更すること。 難しくなるとそのJavaScriptを修正することになるのですが、 その回答によると二つの方法が示されていますが、どちらを利用しているのでしょうか。

keikaiga
質問者

お礼

早速のご回答ありがとうございます。 画像サイズを変更するのが一番早いのですが、 サイズ変更をする事によって画像に乱れが 生じてしまう為に、変更が出来ないのです。 補足にも書かせていたたきます。 ありがとうございました。

keikaiga
質問者

補足

二つの質問のうち、 最初の回答にあった方を利用したいのです。 htmlではなく、jpgのみの表示です。 宜しくお願い致します。

関連するQ&A

  • 小窓の出し方について教えて下さい。

    以前質問させていただいて、自分なりに頑張ってみたのですが、どうしても上手くいきませんでした。 http://oshiete1.goo.ne.jp/kotaeru.php3?q=555060 テーブル内に画像が20入れています。画像1つ1つをクリックしたら小窓が出るようにしたいのです。 小窓の大きさは横230縦160です。 画像の名前はP_1~P_20まであります。 <head>~</head>内に何を書けばいいのか、 テーブル内の画像タグ <a href="http://www○○/p1.html"><img src="p_1.jpg" border="0" width="70" height="48"></a> に、どうJavaScriptを入れればいいのかが 分かりません。 説明が分かりづらかったらすみません。 申し訳ありませんが、再度ご教授お願い致します。

  • 小窓の出し方について教えて下さい。(2)

    http://oshiete1.goo.ne.jp/kotaeru.php3?q=568520 先ほどご回答を頂き、小窓の開き方は解決致しました。 ↓ <script type="text/javascript"><!-- function subwin(imgsrc,imgalt){ sub1=window.open("","subwin","width=230,height=160,resizable=1"); sub1.document.open(); sub1.document.write("<html><head><title>"+imgalt+"</title></head>"); sub1.document.write("<body style='margin: 0;'>") sub1.document.write("<img src='"+imgsrc+"' alt='"+imgalt+"'>"); sub1.document.write("</body></html>"); sub1.document.close(); } //--></script> body内の、呼び出し部分は、 <a href="#" onClick="subwin('画像ファイルのURL','画像ファイルの説明'); return false;"><img src="p_1.jpg" border="0" width="70" height="48"></a> が、クリックして開く小窓に表示させるHTMLファイルで開かせたい 画像が同じページにあります。(大きさは横500縦600) もう1つ教えて頂いた↓ <script type="text/javascript"><!-- function subwin(file){ window.open(file,"subwin","resizable=1, width=230, height=160"); } //--></script> 以上をhead内に記述して、呼び出し部分は <a href="#" onClick="subwin('読み出すHTMLファイルのURL'); return false;"><img src="p_1.jpg" border="0" width="70" height="48"></a> のwidth=230, height=160をwidth=500, height=600にして上記ソースに加えると(?) 全部の小窓がwidth=500, height=600になってしまいます。 width=230, height=160の画像で開かせる小窓と width=500, height=600のHTMLで開かせたい小窓を 同じページに加えるには、どうしたらよいのでしょうか? ご回答宜しくお願い致します。

  • ビルダーで小窓にスクロールバーをつけるには?

    以前ここで http://oshiete1.goo.ne.jp/kotaeru.php3?q=2293407 の質問をして http://www.aimix.jp/smallwin.htmlのやり方で、無事に小窓をつけることができましたが、スクロールバーがついている日記なのですが実際にはスクロールバーはなく途中で切れてしまってます。 どこにスクロールバーを表示するタグを入れたらいいのかがわかりません。 ジャバスクリプトは意味がわからないのでこの方法でご存知の方お願いいたします。

  • 動物が好きな方、 教えて下さい........心配です!!(その2)

    こんにちは すいません、URL間違えていました。 冷やかしではないので、アドバイスやご助言を頂けたら、とても助かります。 URLです <今度は間違えないようにしますので(^^ゞ)> http://oshiete1.goo.ne.jp/kotaeru.php3?q=1665435 http://oshiete1.goo.ne.jp/kotaeru.php3?q=1667874 皆さんのご意見をお聞かせ願えないでしょうか。 宜しくお願いします。

    • ベストアンサー
  • 回答者のマナー?

    ここの質問に対する回答 http://oshiete1.goo.ne.jp/kotaeru.php3?q=62568 ここの回答のまるまるコピー! http://oshiete1.goo.ne.jp/kotaeru.php3?q=29341 参考URLぐらい書くべきだと思うんですが・・・ みなさんはどう思われますか?

  • 教えてください

    何度もすみません。 以前「良い解決策を教えてください」、財務処理をしてくれる弁護士で 投稿させていただいたものです。 その時に、会計士に、お願いしたらっのが有ったので 友達に、見せたのですが、あまりに、沢山のサイトが、あって 全部は、見れませんでした。 岐阜、愛知で財務処理していただける会計士ご存知の方教えてください 関連URL:http://oshiete1.goo.ne.jp/kotaeru.php3?q=134212 関連URL:http://oshiete1.goo.ne.jp/kotaeru.php3?q=148306

  • IPを検索するプログラム

    以前違うカテゴリで教えていただいていたのですが、 未だにどうしてもうまくいくことができません。 文字に制限がありますので下記URLを参照して頂いて 原因がわかれば教えていただけないでしょうか? どうかよろしくお願い致します。 わからないところがあればその都度補足させていただきます。 http://oshiete1.goo.ne.jp/kotaeru.php3?q=326865 http://oshiete1.goo.ne.jp/kotaeru.php3?q=361024

  • OKWave?教えてgoo?

    ここのシステムなんですが、同じ質問でもURLが違いますよね。 http://oshiete1.goo.ne.jp/kotaeru.php3?q=2298646 http://okwave.jp/kotaeru.php3?q=2298646 これってそれぞれのサーバーにデータがあるってことなんですか? それともkotaeru.php3で上手いことやっているんですか? くだらない質問で申し訳ありませんが教えてください。

    • ベストアンサー
    • PHP
  • ドラム用のシンセパッド?

    http://oshiete1.goo.ne.jp/kotaeru.php3?q=1990606 でドラム用のシンセパッドを買ってどうのこうの という回答をいただいたのですが、 そのシンセパッドの写真などの参考URL ネットで買えるならそのURL を教えていただければ幸いです。 それと http://oshiete1.goo.ne.jp/kotaeru.php3?q=1990606 で僕が説明したトレドラを電子ドラムにする方法を教えてくださる方がいらっしゃったら、教えてください。 宜しくお願いします。

  • 今の日本の選択  

    お世話になっております。 サリジェンヌです。 今、日本は重要な局面にいると思います。 今後の日本は弱者切り捨て型社会にすべきか、 国民皆を導いていくべきか皆様のご意見を伺いたく思います。また、前者の場合は、その方向に進んでいるように見えますが、後者の方向に針路変更したい場合はどうしたらよいとお考えでしょうか? 因みにサリジェンヌは後者派です(↓頑張ってきました(参考までに)) http://oshiete1.goo.ne.jp/kotaeru.php3?q=2254612 http://oshiete1.goo.ne.jp/kotaeru.php3?q=2248694 http://oshiete1.goo.ne.jp/kotaeru.php3?q=2245746 http://oshiete1.goo.ne.jp/kotaeru.php3?q=2265951 http://oshiete1.goo.ne.jp/kotaeru.php3?q=2265951 http://oshiete1.goo.ne.jp/kotaeru.php3?q=2126838