- ベストアンサー
画像クリックした後別ウィンドウで表示
過去の質問を調べてみましたが無かったのでご質問させて頂きます。 とあるページに小さい画像が右に並んでいて、左に大きい画像がある ページがあります。 その右側の小さい画像をクリックすると左側の画像が小さい画像の拡大版が 表示されます。 ここまでは過去ログにありましたが、その左側の画像をクリックすると 別ウィンドウでそのクリック後に変わった画像が表示したいのです。 別ウィンドウはhtml表示でなくてもイメージの直表示でOKなのですが 説明足らずでわかりにくい点等ございますが、ご指導頂ければ幸いです。 宜しくお願い致します。
- komham
- お礼率40% (4/10)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
「イメージの直表示」で考えてみました。 サイズ・その他は適当に調整します。 以下のコードを参考にしてみてください。 ------------------------------------------------------------ <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>
その他の回答 (1)
- auty
- ベストアンサー率58% (284/486)
・ 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>
お礼
とても迅速なご回答本当にありがとうございます！！ まさか2度も回答頂けるなんて思っても居ませんでした。 auty様のような方が居て頂けてとても感謝しております。 本当に有難う御座いました。
お礼
auty様本当にありがとうございます！！ 迅速な回答とても感謝です。 まさかこんなに早く回答して頂けるとは思っておりませんでした。 何と感謝すれば良いのかわかりませんがありがとうございました！！！
補足
問題は一応解決できたのですが、 クライアントから『WindowをCloseするボタンと画像サイズに合わせてWindowが広がってが欲しい』との依頼がありました。 Javascriptによるページ生成のWindowに『Close』ボタンは このスクリプトに埋めることは可能なのでしょうか？ 皆様のご指導の程宜しくお願い致します。