- ベストアンサー
リンクで開いたウィンドウのセンターに表示したい
現在、ホームページに小さな写真を並べて置いておいて、クリックすると別ウィンドウで大きな写真を表示するようにリンクを設定しております。 また、必ず新しいウィンドウの左上を基準に表示されてしまいます。 その大きな写真を新しく開かれるウィンドウのセンターに来るようにリンク先のウィンドウの設定は出来るのでしょうか？ また、ウィンドウのサイズに合わせて大きくなったり小さくなったりして欲しいのですが、どのように書けば宜しいのでしょうか？ 宜しくご指導下さい。
- amemasu
- お礼率73% (114/155)
- ホームページ作成ソフト
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
すいません。 僕の勘違いかもしれません。 ウィンドウ自体を中央に表示させるのかと思ってましたf(^_^;) 写真を中央に持ってくるんですね。 でも#1で書いたのでも、ウィンドウサイズを画像のサイズに合わせればできるので、それで説明しますね。 あととりあえず >小さな写真を並べて置いておいて、クリックすると別ウィンドウで大きな写真を表示するようにリンクを設定しております。 えっと、小さな写真を並べて、クリックすると別ウィンドウに大きな写真とあるのですが、御礼に書いてあるソースですと、 ▲▲▲って文字をクリックすると新ウィンドウに表示するソースになってるのですが、その辺はどうなんでしょう？ 小さい画像は用意してあるのでしょうか？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD>←ココから <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version **** for Windows"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE>タイトル</TITLE> </HEAD>←ココまでが<HEAD>部分ですので、 ↑の<TITLE>タイトル</TITLE>の下に <SCRIPT language="JavaScript"> function NewWin1(){ window.open("大きい画像の名前.jpg","","toolbar=no,menubar=no,scrollbars=no,width=小窓の幅,height=小窓の高さ"); } //--!> </SCRIPT> を入れてください。 小窓の幅、高さは画像の幅、高さより少し大きめに設定した方がいいです。その辺は調整して下さい。 次に<BODY>～<BODY>部分ですが、お礼にあるソースでやるならば、 <font size="2"><FONT size="2" color="#333333"><A href="●●●.jpg" target="_blank">▲▲▲</A></FONT></font>を <font size="2"><FONT size="2" color="#333333><A href="javascript:NewWin1()">▲▲▲</A></FONT></font> に変えれば出来ると思います。 小さい画像が用意されているのであれば、 <font size="2"><FONT size="2" color="#333333"><A href="●●●.jpg" target="_blank">▲▲▲</A></FONT></font>を全部消して、その部分に <A href="javascript:NewWin1()"><IMG src="小さい画像の名前" border="0"></A> で出来るかと思います。 あとは#1で説明した通り、増やすこともできますので。 すぐに回答できるかわかりませんが、またわからないことがあれば補足して下さい。
その他の回答 (1)
- gaviru44
- ベストアンサー率56% (95/168)
こんにちは。 ちょっと全員の閲覧者（それぞれ解像度が違うので）をセンターに持ってくるのはわからないのですが。 ある程度調節する方法ということで…f(^_^;) まず<HEAD>～</HEAD>内に以下のソースをコピペして下さい。 <SCRIPT language="JavaScript"> <!--(1)--> function NewWin1(){ window.open("画像の名前１.jpg","","toolbar=no,menubar=no,scrollbars=no,width=小窓の幅,height=小窓の高さ,top=上からの座標,left=左からの座標"); } <!--(2)--> function NewWin2(){ window.open("abc.jpg","","toolbar=no,menubar=no,scrollbars=no,width=400,height=300,top=300,left=500"); } <!--(3)--> function NewWin3(){ window.open("ファイルの名前.html","","toolbar=no,menubar=no,scrollbars=no,width=400,height=300,top=300,left=500"); } //--!> </SCRIPT> ---------------------------------------------------------------- (1) 日本語で書かれた箇所を(2)のように数値を入力して下さい。 ツールバー、メニューバー、スクロールバーを表示させたい場合は【no】の部分を【yes】に変更してください。 topとleftで小窓が表示される位置を調節して下さい。 解像度に合わせて書く方法もあると思いますが、わからないので。 (2) 例です。 二番目以降も同様に function NewWin2(){～} を function NewWin3(){～} などに変えて増やせます。 もう少し綺麗にまとめて書ければいいんですが、書き方がわからなくて申し訳ありません。 小窓は上から300px下、左から500px右に表示されます。 ---------------------------------------------------------------- (3) (3)は○○.jpgではなく○○.htmlの場合です。 表示される画像のファイルを別に作ります。 例えば、 <HTML> <HEAD> <TITLE>タイトル</TITLE> </HEAD> <BODY bgcolor="#888888"> <DIV align="center"> <A href="JavaScript:window.close()"><IMG src="画像の名前.jpg" border="0"></A> <BR> ○○の写真です。 </DIV> </BODY> </HTML> ↑のように書けばちょっとした文章を加えてもいいですし、小窓にタイトルも背景の色（#888888）も付きます。 それと、Ｘじゃなく小窓に表示された画像をクリックすると小窓が閉じます。 あと<!--(1)--><!--(2)--><!--(3)-->は消しちゃって下さい。 --------------------------------------------------------------- あとは<BODY>～</BODY>内に <A href="javascript:NewWin1()"><img src="小さい画像の名前.jpg" border="0"></A> と書きます。 二つ目以降は <A href="javascript:NewWin2()"><img src="小さい画像の名前.jpg" border="0"></A> NewWinをNewWin3、NewWin4と変えれば出来ます。 大量の写真を貼る場合、ソースが汚いかと思いますが、ご勘弁を。
お礼
すいません・・・もう少し教えてください（＾＾； ｈｐはビルダー８で作っておりまして、下記のようにＨＴＭＬが書き出されています。 <font size="2"><FONT size="2" color="#333333"><A href="●●●.jpg" target="_blank">▲▲▲</A></FONT></font></td> ▲▲▲がクリックしてもらう文字で、●●●が新しく開く写真です。 どこに教えていただいたソースを書けば宜しいのでしょうか? お手数でも教えていただけたら助かります。
補足
うわぁ～、とても丁寧にありがとうございます！ これなら殆どＨＴＭＬの分からない自分でも何とかなりそうな気がします！ チョッと今日は出来ませんが急ぎ試してみます。 ありがとうございました。