- ベストアンサー
小窓の出し方について教えてください
- テーブル内に画像が２０入れており、画像をクリックしたら小窓が出るようにしたいです。
- 小窓の大きさは横２３０縦１６０で、画像の名前はP_1～P_20まであります。
- <head>～</head>内にはJavaScriptを書く必要がありますが、具体的な方法が分かりません。
- keikaiga
- お礼率88% (105/119)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
ラフなソースですが、こんな感じでしょうか。 head内には、以下のスクリプトを入れてみてください。 <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ファイルを別に用意してあるのであれば、 <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> のようにすると良いと思います。 参考になれば幸いです。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_3_thumbnail_img_sm.png)
お礼
早速のご回答ありがとうございました。 教えて頂いた通りにやってみましたら、 無事出来ました♪ 本当に嬉しいです♪ありがとうございました。