 サンプル
下のリンクは小窓で画像表示とページ表示をしますので、それぞれクリックし確認してみて下さい。
小窓１ （画像を表示）
小窓２ （ページを表示）
設定
HTMLソースにコピーしたり、修正したりしなくてはいけないのでちょっと面倒かもしれませんが、修正する部分を理解すれば簡単にできるようになると思いますのでお試し下さい。
1. ソースのコピー
まずは下のソースをコピーして下さい。
<SCRIPT language="JavaScript">
<!--
function
mado1(){
renew = window.open("URL","new","width=100,height=100");
renew.focus();
}
//
-->
</SCRIPT> |
2. ソースの貼り付け
次に先ほどコピーしたソースを貼り付けますので、HTMLソースの画面に切り替えて下さい。
HTMLソースの上の方を見てみると、下のように<TITLE> </TITLE>で囲われた部分があると思いますので、その下に挿入します。
[挿入前] 赤で囲われている部分の下に上のソースを挿入します。
[挿入後] 赤で囲われている部分が挿入したソースです。
ソースを貼り付ける時は、分かりやすいように </TITLE> の後ろでクリックし、カーソルを移動させ、数回改行してスペースを空けてから挿入すると分かりやすいかと思います。
3. ソースの修正
貼り付けたソースに表示させるページや画像、サイズに合わせて修正していきます。
修正する項目は３つで、複数の小窓を付ける時は、それぞれに設定していきます。
（複数の場合は後記します）
下の表にある部分をソース内で探し、それぞれ修正して下さい。
| URL |
ファイル名又はURL
URLの文字を消し、代わりに表示したいページの
ファイル名に修正します。 （https:// からでも可）。 |
| width=100 |
小窓の幅
表示させる小窓の 「幅」 を指定します。
数値だけ修正し、他の部分を消してしまわないように
注意してください。 |
| height=100 |
小窓の高さ
表示させる小窓の 「高さ」 を指定します。
数値だけ修正し、他の部分を消してしまわないように
注意してください。 |
※ 小窓にページを表示させたい時は別途小窓用のページを用意
し、そのページを指定して下さい。
・このページの設定例
例えばページ上部のサンプル [小窓１] は、下のように設定したいので、
| 修正項目 |
設定した項目 |
| ファイル名又はURL |
aimixlogoy.jpg |
| 小窓の幅 |
210 |
| 小窓の高さ |
150 |
ソースの修正後は下のようになります。
<SCRIPT language="JavaScript">
<!--
function
mado1(){
window.open("aimixlogoy.jpg","new","width=210,height=150");
}
//
-->
</SCRIPT> |
4. リンクの設定
ソースの修正が完了したら、小窓へリンクを設定します。
通常のリンクと同じように、文字や画像を右クリックし、[リンクの挿入]を選択します。
リンクの設定ではファイル名に下記をコピー・ペーストして下さい。
これで小窓の設定は完了ですが、そのままプレビューすると表示されませんので一度ページを保存し、プレビューして下さい。
その他
小窓を複数表示する場合を下のページで説明しています。
ページ中に複数の小窓を設置してみる
|
