小さい画像をクリックで、
大きな画像を小窓で見れるようにしたいのですが、
大きな画像のサイズが全部バラバラなのです。
(画像は合計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ランキング
-
画像のランダム表示、及び画像...
-
複数のリンク画像を一定時間で...
-
Slick.jsのオプションrtlについて
-
innerHTMLに代入したインライン...
-
読み込んだQRコードをフォーム...
-
jqueryのプラグインslickの画像...
-
クリックして変更した画像を他...
-
JS <a></a>タグ内のリンク先ア...
-
jqueryのsortableで一部ソート...
-
表示・非表示のスクリプトで、...
-
文字をクリックしたら別の文字...
-
javascriptテキストBOX色を元に...
-
フッター上部に謎の隙間
-
プログラミングでのビンゴマシ...
-
フォームに入力された値により...
-
dblclickでdiv要素を一回だけ作...
-
window.openで値の渡し方を教え...
-
計算結果の表示方法について
-
console.log結果をhtmlで表示し...
-
jQueryのhide,showで中の要素が...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
textareaに画像を表示したい
-
JavaScript スライドの画像にリ...
-
HTMLで条件分岐はできますか?
-
画像ランダム表示、しかしダブ...
-
bxsliderにて読み込み後に内容...
-
画像を切り替えランダム表示
-
1枚の画像をクリックすると複数...
-
Gifアニメ、最後のコマに行った...
-
画像の重なりの順序を代える方...
-
小窓について教えて下さい。
-
スライダーを実装した場合、ペ...
-
スワップイメージが上手く動作...
-
USEMAPでの指定区域にマウスオ...
-
1枚の画像をクリックして複数の...
-
クリッカブルマップの一部分だ...
-
オンマウスで、画像切り替え+...
-
iframe内のリンク文字のマウス...
-
edgeでスクロールバーに色が表...
-
画像の上に画像リンクを貼る方法
-
prettyphotoの画像表示について
おすすめ情報