小さい画像をクリックで、
大きな画像を小窓で見れるようにしたいのですが、
大きな画像のサイズが全部バラバラなのです。
(画像は合計8コあります)
通常は下記URLで小窓を出しているのですが、
画像のサイズがバラバラの場合、
8コのJavaScriptを書き込まなければいけないのでしょうか?
もし他に方法がありましたら、教えて下さい。
http://oshiete1.goo.ne.jp/kotaeru.php3?q=568520
説明が分かりづらくて申し訳ありませんが、
宜しくお願い致します。
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>
このような形に直せば、関数を呼び出す側で開く小窓のサイズを指定・制御できます。
こんな感じではいかがでしょうか?
前回も今回も、大変分かりやすく、詳しく教えていただき、ありがとうございました。
大変感謝しております。
再度質問をするかとも思いますが、
また宜しくお願い致します。
この方法で、一度やってみます。
ありがとうございました。
No.1
- 回答日時:
>画像のサイズがバラバラの場合、
>8コのJavaScriptを書き込まなければいけないのでしょうか?
そんなことはありません。一番簡単なのは、画像サイズを統一するか、
現在のウィンドウサイズに収まる形に画像サイズを変更すること。
難しくなるとそのJavaScriptを修正することになるのですが、
その回答によると二つの方法が示されていますが、どちらを利用しているのでしょうか。
早速のご回答ありがとうございます。
画像サイズを変更するのが一番早いのですが、
サイズ変更をする事によって画像に乱れが
生じてしまう為に、変更が出来ないのです。
補足にも書かせていたたきます。
ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- デジタルカメラ 画像のJPGファイルの「大きさ」と「サイズ」の意味の違いをお教えください。 8 2022/09/18 14:50
- フリーソフト 倍率自動調整して全画面表示できるフリーの画像ビューアー 1 2023/08/24 10:55
- Excel(エクセル) エクセル、画像ファイル名の書かれたセル(複数個所)に画像を一括で表示させる方法 1 2023/04/19 00:19
- デジタルカメラ 画像ファイルのサイズを理解する方法についてお教えください。 3 2022/09/18 12:54
- Android(アンドロイド) Androidでツイキャスの2窓設定が分かりません。 ググれば説明は出てきますが 左が説明画像 右が 2 2022/04/03 19:56
- Google Maps iPhoneのGoogle検索窓を通常の大きさに 戻す方法を教えて頂けませんか?(切実) 日本全国の 2 2022/10/02 02:08
- その他(クラウドサービス・オンラインストレージ) firestorage_androidスマホでダウンロードできない 1 2022/10/25 08:18
- その他(AV機器・カメラ) 【大至急】写真加工に強い方、お願いします。 現在、自作のブックカバーをプリンパさんに依頼しています。 2 2023/06/07 21:30
- ホームページ作成・プログラミング グリッドレイアウトHTMLとCSS 1 2023/02/22 02:36
- Photoshop(フォトショップ) 【大至急】写真加工に強い方、お願いします。 現在、自作のブックカバーをプリンパさんに依頼しています。 6 2023/06/10 11:51
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
画像を切り替えランダム表示
-
bxsliderにて読み込み後に内容...
-
画像クリックで別の場所の画像...
-
USEMAPでの指定区域にマウスオ...
-
中心を軸にくるくる回るjQuery ...
-
各フォルダから1枚ずつ画像をラ...
-
【java】背景画像を一定時間で...
-
小窓について教えて下さい。
-
【早急】画像入れ替えJavaScrip...
-
1枚の画像をクリックして複数の...
-
HTMLで条件分岐はできますか?
-
textareaに画像を表示したい
-
ソート時に△/▽のような画像を表...
-
マウスに画像がついてくる
-
残像を残しながらjpg画像を自動...
-
javaを使ってマウスオンでの画...
-
javascriptのitem?klassとは?
-
クリッカブルマップの一部分だ...
-
MAX関数を使ってからLEFT JOIN...
-
jspでcssが読み込めない
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
textareaに画像を表示したい
-
JavaScript スライドの画像にリ...
-
HTMLで条件分岐はできますか?
-
1枚の画像をクリックして複数の...
-
Javascript で共通の処理をどこ...
-
JavaScriptとチェックボックス...
-
画像ランダム表示、しかしダブ...
-
Gifアニメ、最後のコマに行った...
-
画像の重なりの順序を代える方...
-
1枚の画像をクリックすると複数...
-
javascriptで毎月替わる画像
-
オンマウスで、画像切り替え+...
-
透過pngの透明部分以外をクリッ...
-
Javascriptで指定した日付と時...
-
jQueryスライドショー画像への...
-
JavaScript で flexslider の画...
-
lightbox2をiframeから外に表示...
-
重なった画像にクリックイベン...
-
Twitterの埋め込みしたWebペー...
-
画像をフォルダに入れれば表示...
おすすめ情報