小さい画像をクリックで、
大きな画像を小窓で見れるようにしたいのですが、
大きな画像のサイズが全部バラバラなのです。
(画像は合計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で質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・「I love you」 をかっこよく翻訳してみてください
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・昔のあなたへのアドバイス
- ・かっこよく答えてください!!
- ・あなたが好きな本屋さんを教えてください
- ・スタッフと宿泊客が全員斜め上を行くホテルのレビュー
- ・【大喜利】【投稿~8/27】 こんなガソリンスタンド二度と来るか!なぜそう思った?
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・【お題】動物のキャッチフレーズ
- ・【お題】甲子園での思い出の残し方
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・「それ、メッセージ花火でわざわざ伝えること?」
- ・自分用のお土産
- ・人生で一番お金がなかったとき
- ・一番好きなみそ汁の具材は?
- ・泣きながら食べたご飯の思い出
- ・ちょっと先の未来クイズ第1問
- ・ゴリラ向け動画サイト「ウホウホ動画」にありがちなこと
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
p5jsについて
-
Twitterの埋め込みしたWebペー...
-
表と裏がある1枚の画像を回転す...
-
Javascript で共通の処理をどこ...
-
マウスに画像がついてくる
-
iframe内のリンク文字のマウス...
-
HTMLで条件分岐はできますか?
-
ジャバスクリプト
-
1枚の画像をクリックすると複数...
-
jQueryで同じクラス名のものを...
-
javascriptテキストBOX色を元に...
-
createElementで作成した要素を...
-
MAX関数を使ってからLEFT JOIN...
-
「jQuery」アコーディオンメニ...
-
2箇所の画像をランダムに複数表示
-
複数画像のランダム複数表示(...
-
javascript テキストエリアを1...
-
ラジオボタンで段階評価
-
前回の質問の続き function mov...
-
JQueryで画像の上で文字を動かす
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
textareaに画像を表示したい
-
bxsliderにて読み込み後に内容...
-
Gifアニメ、最後のコマに行った...
-
JavaScript スライドの画像にリ...
-
透過pngの透明部分以外をクリッ...
-
JavaScriptとチェックボックス...
-
innerHTMLで、表示すると、一部...
-
クリッカブルマップの一部分だ...
-
Javascriptで指定した日付と時...
-
画像をフォルダに入れれば表示...
-
1枚の画像をクリックすると複数...
-
WEBページ立ち上げ時に1回のみ...
-
image.onload = .. の後に imag...
-
曜日と時間を指定して表示画像...
-
美人時計風JAVAスクリプトが上...
-
決まった曜日で一定時間だけ表...
-
画面の表示位置を指定させて表...
-
jQuery FlexSliderのカルーセ...
-
1枚の画像をクリックして複数の...
-
HTMLで条件分岐はできますか?
おすすめ情報