ワンクリックで別ウインドウを
指定サイズで表示する
さらに表示したウインドウを指定秒後に終了させる
更新日時
suga@mte.biglobe.ne.jp スガ
ロールオーバーで指定した画像をクリックして別ウインドウに表示する場合、この表示画面サイズを指定することが出来ます。
左の画像をクリックしてください、別ウインドウでサイズ指定
(このケースは600×500です)開きます、なお開いたHTMは
指定秒後に閉じます
(^_-)
作成方法

 1 まず小さな画像と、クリックで表示させる画像を用意します(例 sitei1.jpg{600×.450} sitei1-1.jpg{100×75})

 2 次に「クリック表示した時」に表示される、画像ファイルを入れたHTMファイルを作成します、この際、画像は
   左上一杯に貼り付けます又は、文字挿入部分をあけて左側に貼り付けます。

    * この処理の際、ホームページビルダーの上・左に表示されているサイズ(ドットサイズになります)をメモします。
           上記のサンプルは、文字部分を含めて600×500です。

 3 作成が完了しましたらば、この HTM を名前を付けて保存(例では sitei1.htm です)

 4 次に「メイン」となる HTM を作成します、「ファイル」→「何処でも配置で新規作成」をクリックします。

 5 次に下記ソース部分を </body> の直前に「編集」→「コピー」します。


〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

<SCRIPT language="JavaScript">
<!--
function new_win1(){
window.open("sitei1.htm","","width=600,height=500,top=200");
}
//-->
</SCRIPT><A href="#" onclick="JavaScript:new_win1();return false"> <IMG border="0" src="sitei1-1.jpg" width="100" height="75"> </A>

〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

 6 以上で完成です、直ちにメインのHTMに任意の名前を付けて(この例では siteisizu1.htm です(^_-))保存して下さい。
   その後に於いて「プレビュー」で確認して下さいm(_ _)m

   また、「サイト転送」に於いて、殆どが自動転送対象となりませんまで、「一覧に追加する」で個別に指定してください。
      * 「fxfer」を使った方が簡単でしょう(@_@)


続いて複数個の画像で同じ処理を行います(上記がサンプルです)。

 7 上に準じた方法で、小さい画像と、クリックで開きたい画像の入ったHTMを作成します。
     ここの例では小さい画像が sitei12-1.jpg で、クリックした時に表示されるHTMが sitei2.htm で
     画像が sitei2.jpg です。
         注 小さい画像は、他の画像の上に重ねておくことも可能です(^_-)

 8 下記のソース部分を</body>の直前に「編集」→「コピー」してください。


〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
<SCRIPT language="JavaScript">
<!--
function new_win2(){
window.open("sitei2.htm","","width=450,height=650,top=200");
}
//-->
</SCRIPT><A href="#" onclick="JavaScript:new_win2();return false"> <IMG border="0" src="sitei2-1.jpg" width="100" height="36"> </A>

〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

 9 さらに続ける場合は、下記の説明を参考にして下さい(^_-) 
小さい画像は何処に置いてもかまいません(^_-)指定秒後に開いた
ウインドウは閉じます。
説明

  「ピンク色」で書かれている「new_win1」が 「2」、「3」、「4」と画像の数に伴い数値が上がっていきます
    (表示場所が2ヶ所です)。

  「window.open」の右側がクリックした時に表示される画像等を含んだ htm ファイルで、「width」・「height」は   
  表示させたい幅・高さです。

  「<IMG・・・・」の画像 (sitei1-1.jpg) はロールオーバー用の小さい画像です
以上です(^_-)
注意 この確認は「プレビュー画面」では旨く表示されません、一度WEBにアップしてweb上で確認して下さい。
表示させたウインドウを指定秒後に終了させる

 1 この処理は、クリックして表示させる(される)「HTM」にスクリプトを記載します(^_-)

 2 次の〜〜〜〜〜〜で囲まれた部分を、
表示させる「HTM」の</body>の直前に貼り付けて下さい。

〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

<SCRIPT LANGUAGE="JavaScript">
<!--
setTimeout("window.close()", 1000 *
10 );
//-->
</SCRIPT>

〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

   注 1000*10の中の「
10」が終了までの秒数です(^_-)

これで終わりです
表示位置の指定

  1 表示させる位置の指定は、top left で指定します。

  2 top=200,left=300 のように記載します。